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 相关文章推荐
js鼠标左右键 键盘值小结
Jun 11 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
Javascript变量函数浅析
Sep 02 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 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
PHP在线生成二维码代码(google api)
2013/06/03 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
详解json在php中的应用
2018/09/30 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
JS实现放烟花效果
2020/03/10 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
Python内建数据结构详解
2016/02/03 Python
python调用fortran模块
2016/04/08 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
python烟花效果的代码实例
2020/02/25 Python
django在开发中取消外键约束的实现
2020/05/20 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
Python如何重新加载模块
2020/07/29 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书