浅谈jQuery页面的滚动位置scrollTop、scrollLeft


Posted in Javascript onMay 19, 2015

Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示)。当访问者滚动页面的时候,一部分文档会从视线中消失。例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内。这意味着浏览器窗口的左上角和文档的左上角并不相同。如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner;而如果只是试图将元素的left和top位置设置为0,将会遇到麻烦,你实际上只是将其放到了文档的顶部,但是却位于浏览器窗口之外。

幸运的是,jQuery提供了两个函数,允许你确定从顶部和左边滚动页面的多少部分(换句话说,文档的多少像素存在于浏览器窗口的上边和左边)。要确定文档的多少部分在浏览器窗口之上,使用如下所示这行代码:

$(document).scrollTop()

要确定文档的多少部分位于屏幕的左边,使用如下所示这行代码:

$(document).scrollLeft()

这两个函数都返回一个像素值,你可以用它来定位页面上的另一个元素。例如,如果你想要将一个弹出窗口定位于页面的中心,即便在某人向下滚动之后也是如此,那么,你需要确定访问者滚动了多远,并且移动弹出窗口,以使得很多额外元素位于页面的下方。在弹出工具的提示的例子中,当访问者已经向下滚动一个页面,要定位工具提示时,你需要小心:很容易意外地将工具提示放到页面空间中,但是,却在浏览器的视口中可见区域之外。使用scrollTop()来避免将一个工具提示放在浏览器窗口顶部的可视区域之上。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
详解Javascript继承的实现
Mar 25 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
vue下载二进制流图片操作
Oct 26 Javascript
javascript检测两个数组是否相似
May 19 #Javascript
10条建议帮助你创建更好的jQuery插件
May 18 #Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 #Javascript
JQuery中层次选择器用法实例详解
May 18 #Javascript
Jquery中基本选择器用法实例详解
May 18 #Javascript
Jquery注册事件实现方法
May 18 #Javascript
jquery中map函数遍历数组用法实例
May 18 #Javascript
You might like
星际争霸任务指南——虫族
2020/03/04 星际争霸
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
Python之列表实现栈的工作功能
2019/01/28 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
Django多个app urls配置代码实例
2020/11/26 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
愚人节活动策划方案
2014/03/11 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android