浅谈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 相关文章推荐
jQuery的一些注意
Dec 06 Javascript
jQuery的三种$()
Dec 30 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
js date 格式化
Feb 15 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 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
ThinkPHP分页类使用详解
2014/03/05 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
python实现连接mongodb的方法
2015/05/08 Python
python 字典中取值的两种方法小结
2018/08/02 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
关于中国梦的演讲稿
2014/04/23 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
法律意见书范文
2015/05/20 职场文书
生产车间管理制度
2015/08/04 职场文书
国庆节主题班会
2015/08/15 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书