深入浅析JavaScript中的scrollTop


Posted in Javascript onJuly 11, 2016

含义:滚动条高度

作用:滚动加载(ajax),滚动导航固定定位,滚动弹框定位等等.

展示滚动导航和侧边栏滚动固定定位的效果:

1、chrome浏览器

document.body.scrollTop和document.documentElement.scrollTop都可以

2、各浏览器下 scrollTop的差异

IE6/7/8/9/10:

对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ;
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ;

Safari:

safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;

Firefox:

火狐等等相对标准些的浏览器就省心多了,直接用

document.documentElement.scrollTop ;

3、获取scrollTop值

完美的获取scrollTop 赋值短语 :

var scrollTop = document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;

ps:javascript中scrolltop用法的问题

document.documentElement.scrollTop指的是滚动条的垂直坐标

document.documentElement.clientHeight指的是浏览器可见区域高度

document.documentElement.clientHeight-oDiv是悬浮框的初始垂直坐标(相对于body的top值)(这个值是固定不变的)

但是当你拉动滚动条的时候,悬浮框的垂直坐标(target)必须要在初始坐标的基础上增减相应的值才能获得视觉上随滚动条滚动的效果,而这个增减的值就是滚动条拉动的距离,即你这个scrollTop

下面给大家说下javascript中scrollTop和offsetTop有啥区别

scrollTop是指某个可滚动区块向下滚动的距离,比如向下滚动了10个像素,那么这个元素的scrollTop属性值就是10;

offsetTop则是元素的上边框与父元素的上边框的绝对距离。

两者描述的不是同一个东西,所以没有可比性。

以上所述是小编给大家介绍的JavaScript中的scrollTop的全部叙述,希望对大家有所帮助,如果大家想了解更多内容,敬请关注三水点靠木!

Javascript 相关文章推荐
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
小程序云开发实战小结
Oct 25 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 #Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 #Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 #Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 #Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 #Javascript
Bootstrap实现弹性搜索框
Jul 11 #Javascript
Summernote实现图片上传功能的简单方法
Jul 11 #Javascript
You might like
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
prototype 1.5 & scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
《Python学习手册》学习总结
2018/01/17 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
Python3 元组tuple入门基础
2020/02/09 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
信息工程学院毕业生推荐信
2013/11/05 职场文书
质量月活动总结
2014/08/26 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书