浅谈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 词法作用域和闭包分析说明
Aug 12 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
Vue 的双向绑定原理与用法揭秘
May 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
如何利用php+mysql保存和输出文件
2006/10/09 PHP
一个php作的文本留言本的例子(二)
2006/10/09 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
python3.7 的新特性详解
2019/07/25 Python
基于python代码批量处理图片resize
2020/06/04 Python
keras 多任务多loss实例
2020/06/22 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
有针对性的求职自荐信
2013/11/14 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
投标邀请书范本
2015/02/02 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
《比的意义》教学反思
2016/02/18 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
详解Vue router路由
2021/11/20 Vue.js
MySQL详细讲解变量variables的用法
2022/06/21 MySQL