浅谈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 相关文章推荐
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 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防盗链的常用方法小结
2010/07/02 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
Dojo 学习要点
2010/09/03 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
Django中create和save方法的不同
2019/08/13 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
python代码实现猜拳小游戏
2020/11/30 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
UNIX文件类型
2013/08/29 面试题
高三自我鉴定范文
2013/10/19 职场文书
药品质量检测应届生求职信
2013/11/14 职场文书
自我鉴定怎么写
2013/12/05 职场文书
应用艺术专业个人的自我评价
2014/01/03 职场文书
大学三年计划书范文
2014/04/30 职场文书
房展策划方案
2014/06/07 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
2014年班主任工作总结
2014/11/08 职场文书