scrollTop的兼容性小结

2019独角兽企业重金招聘Python工程师标准>>>

在页面上加上了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

之后，document.body.scrollTop的值一直为0（在IE和FF下），网上有人改为document.documentElement.scrollTop就可以了，试用了一下真的OK了。

但是当换到Google浏览器时，问题又出来了，document.documentElement.scrollTop值一直为0！到是document.body.scroll的值正确了。

网上有解决方案如下：（http://www.codebit.cn/pub/html/javascript/tip/get_scroll_position/）

[javascript] view plaincopy

<mce:script type="text/javascript"><!--
// 说明：用 Javascript 获取滚动条位置等信息
// 来源：ThickBox 2.1
// 整理：CodeBit.cn ( http://www.CodeBit.cn )
function getScroll()
{
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
return { t: t, l: l, w: w, h: h };
}
// --></mce:script>

首先说明，这段代码是正确的。只是当document.documentElement和document.documentElement.scrollTop都有值，但是document.documentElement.scrollTop==0时，有点误导人，呵呵。

于是我改成如下：

[javascript] view plaincopy

var top = document.body.scrollTop;
if(0==top){
top = document.documentElement.scrollTop;
}
alert(top);

后来发现

var top = document.body.scrollTop | document.documentElement.scrollTop;

这样更简单，而且在我的几种浏览器下也都OK。。。。。

转载于:https://my.oschina.net/122612475/blog/313478

scrollTop的兼容性小结相关推荐

android accessibility 模拟键盘事件_H5 键盘兼容性小结
在 H5 项目中,我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况.在 input/textarea 输入框获取焦点时,会自动触发键盘弹起,而键盘弹出 ...
android 如何判断h5页面是否加载完成_H5 键盘兼容性小结
" 我们经常需要填写表单,键盘的行为存在各种差异." 在 H5 项目中,我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况.在 in ...
h5如何动态获取键盘高度_H5 键盘兼容性小结
在 H5 项目中,我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况.在 input/textarea 输入框获取焦点时,会自动触发键盘弹起,而键盘弹出 ...
h5底部输入框被键盘遮挡_H5 键盘兼容性小结
" 我们经常需要填写表单,键盘的行为存在各种差异." 在 H5 项目中,我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况.在 in ...
IE兼容性小结（IE7及以上版本）
缘由在急速的互联网时代,原本ie系列的低版本浏览器就该淘汰了.可偏偏还是有很多xp系统ie7.8浏览器,这有让网站甚是苦逼.练就了一套新技术,原本以为能大展身手,可却在ie阵容中认怂了,不得不规规矩 ...
scrollTop兼容性问题
很多时候需要获取页面的scrollTop的值,通常使用document.body.scrollTop来获取值.今天在review代码时,发现这个写法无法获取到scrollTop的值,查阅资料发现scr ...
onsrcoll和scrollTop兼容与实现
对于onscroll事件的支持各浏览器 document.document.body.document.documentElement 对象的 onscroll 事件的支持存在差异. 所谓的支持性存 ...
怎么得到scrollTop
我们学习一个事件 : 页面滚动效果 window.onscroll = function() { 页面滚动语句 } 谷歌浏览器和没有声明 DTD <DOCTYPE > : ...
javascript滚动到顶部scrollTop用法
首先了解下列相关属性网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: documen ...

scrollTop的兼容性小结

scrollTop的兼容性小结相关推荐

最新文章

热门文章