js中的document.body.scrollTop与document.documentElement.scrollTop
获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop
获取当前页面滚动条横坐标的位置:document.body.scrollLeft与document.documentElement.scrollLeft
1.各浏览器下 scrollTop的差异:
IE6/7/8:
可以使用 document.documentElement.scrollTop;
IE9及以上:
可以使用window.pageYOffset或者document.documentElement.scrollTop
Safari:
safari: window.pageYOffset 与document.body.scrollTop都可以;
Firefox:
火狐等等相对标准些的浏览器就省心多了,直接用window.pageYOffset 或者 document.documentElement.scrollTop ;
Chrome:
谷歌浏览器只认识document.body.scrollTop;
注:标准浏览器是只认识documentElement.scrollTop的,但chrome虽然我感觉比firefox还标准,但却不认识这个,在有文档声明时,chrome也只认识document.body.scrollTop.
由于在不同情况下,document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值,那到底网页的scrollTop值怎么得到呢?难道又要用JavaScript进行判断?
其实不必。因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。所以,如果要得到网页的真正的scrollTop值,如果不考虑safari,可以这样:
var sTop=document.body.scrollTop+document.documentElement.scrollTop;
这两个值总会有一个恒为0,所以不用担心会对真正的scrollTop造成影响。一点小技巧,但很实用。
2.获取scrollTop的值
可以使用window.pageYoffsetWindow pageXOffset 和 pageYOffset 属性
其定义:pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。
注意: IE 8 及 更早 IE 版本不支持该属性,但可以使用 "document.documentElement.scrollLeft" 和 "document.documentElement.scrollTop" 属性 。
由于谷歌兼容问题,可以使用document.body.scrollLeft和document.body.scrollTop 或者window.pageXoffset与window.pageYoffset。
总结
var heightTop = document.documentElement.scrollTop || document.body.scrollTop; console.log(heightTop);
参考地址:http://blog.csdn.net/lploveme/article/details/7011174
http://www.runoob.com/jsref/prop-win-pagexoffset.html
js中的document.body.scrollTop与document.documentElement.scrollTop的更多相关文章
- 5月15日上课笔记-js中 location对象的属性、document对象、js内置对象、Date事件对象、
location的属性: host: 返回当前主机名和端口号 定时函数: setTimeout( ) setInterval() 二.document对象 getElementById(); 根据ID ...
- 一文看懂js中元素的滚动大小(scrollWidth,scrollHeight,scrollTop,scrollLeft)
滚动大小(scroll dimension) 滚动大小指的是包含滚动内容元素的大小. 以下是与元素滚动内容大小相关的属性: 1. scrollWidth:在没有滚动条的情况下,元素内容的总宽度. 2. ...
- js中的各种“位置”——“top、clientTop、scrollTop、offsetTop……”,你知道多少
当要做一些与位置相关的插件或效果的时候,像top.clientTop.scrollTop.offsetTop.scrollHeight.clientHeight.offsetParent...看到这么 ...
- js中不同的height, top的对比
每次看到js中的clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到 ...
- js中call、apply、bind那些事
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...
- js中call、apply、bind那些事2
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如… 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...
- 在js中获取 input checkbox里选中的多个值
思路:利用name属性值获取checkbox对象,然后循环判断checked属性(true表示被选中,false表示未选中).下面进行实例演示: 1.html中展示: <input type=& ...
- 关于js中 document.body.scrollTop 不能返回正确值的原因
本来是为了通过document.body.scrollTop来获取浏览器垂直滚动条向下滚动的像素,但是不管滚动条在什么位置总是返回是0,造成这样的原因和html的头部声明有关,如果头部声明 为:< ...
- document.body的一些用法以及js中的常见问题
document.body的一些用法以及js中的常见问题 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight ...
随机推荐
- [原] 细说 NUMA
详说 NUMA 标签(空格分隔): Cloud2.0 测试条件 两台机器: CPU: Intel(R) Xeon(R) CPU E5-2620 v3 @ 2.40GHz X 24 Intel(R) X ...
- 区域、模板页与WebAPI初步
区域.模板页与WebAPI初步 一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域( ...
- 开源Asp.Net MVC网上商城BrnShop
开源Asp.Net MVC网上商城BrnShop正式发布,提供源码下载 BrnShop网上商城是以Asp.Net mvc3为基础开发的网上商城,源代码完全开源(企业版的源代码目前还没有完全整理完成,一 ...
- Mvc快速开发
Asp.Net Mvc + ComBoost.Mvc快速开发 ComBoost项目地址 http://comboost.wodsoft.com https://github.com/Kation/ ...
- 【分享】LateX排版软件学习教程合集
来源于:http://www.hejizhan.com/html/xueke/416/x416_13.html LATEX2e科技排版指南.pdf 8.3 MB An Example LaTeX ...
- Ninject 在 Winform、 Asp.net MVC中连络EntityFramework的应用
Ninject 在 Winform. Asp.net MVC中连络EntityFramework的应用( 注入同一个DbContext的应用名人名言:科学是老老实实的东西,它要靠许许多多人民的劳动和智 ...
- 数据分析R语言1
数据分析R语言 无意中发现网上的一个数据分析R应用教程,看了几集感觉还不错,本文做一个学习笔记(知识点来源:视频内容+R实战+自己的理解),视频详细的信息请参考http://www.itao521.c ...
- 【C#基础知识】静态构造函数,来源于一道面试题的理解
看到园友的一道面试题,很好奇,测试了一下结果. public class A { public static int X=B.Y ; public A() { ++X; } } public clas ...
- 学习SQL关联查询
通过一个小问题来学习SQL关联查询 原话题: 是关于一个left join的,没有技术难度,但不想清楚不一定能回答出正确答案来: TabA表有三个字段Id,Col1,Col2 且里面有一条数据1,1, ...
- unittest 框架
unittest 框架 学习unittest 很好的一个切入点就是从selenium IDE 录制导出脚本.相信不少新手学习selenium 也是从IED 开始的. IDE学习参考: 菜鸟学自动化测试 ...