document.body.scrollTop 值总为0的解决方法 比较常见的标准问题


Posted in Javascript onNovember 30, 2009

做页面的时候可能会用到位置固定的层,读取 document.body.scrollTop 来设置层的位置,像这样:­

window.onscroll = function (){
var oFix = document.getElementById("divfix");
oFix.style.top = document.body.scrollTop + "px";
}

可是怎么没有达到预期效果呢,输出 document.body.scrollTop 的值一看,一直都是 0。原来是 DTD 的问题,要是页面直接用 开头的话就没有问题了。但是要符合 web 标准,DTD 当然是不能少的。具有 DTD 时用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以了。­

window.onscroll = function (){
var oFix = document.getElementById("divfix");
oFix.style.top = document.documentElement.scrollTop + "px";
}

编者注:­

页面具有 DTD(或者说指定了 DOCTYPE)时,使用 document.documentElement。
页面不具有 DTD(或者说没有指定了 DOCTYPE)时,使用 document.body。
在 IE 和 Firefox 中均是如此。
为了兼容,可以使用如下代码: var scrollTop = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;

Javascript 相关文章推荐
基于jQuery的星级评分插件
Aug 12 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 #Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 #Javascript
javascript &&和||运算法的另类使用技巧
Nov 28 #Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 #Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 #Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 #Javascript
Javascript 复制数组实现代码
Nov 26 #Javascript
You might like
浅析51个PHP处理字符串的函数
2013/08/02 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
python数据结构之链表的实例讲解
2017/07/25 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
python实现顺序表的简单代码
2018/09/28 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
Python错误的处理方法
2020/06/23 Python
python statsmodel的使用
2020/12/21 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
PyQt QMainWindow的使用示例
2021/03/24 Python
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
义和团口号
2014/06/17 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
趵突泉导游词
2015/02/03 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
大学副班长竞选稿
2015/11/21 职场文书
导游词之西安骊山
2019/12/03 职场文书
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers