浅谈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 相关文章推荐
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
发现的以前不知道的函数
2006/09/19 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python对excel文档的操作方法详解
2018/12/10 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
全球最大的游戏市场:G2A
2018/07/05 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
2014社区三八妇女节活动方案
2014/03/30 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis