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实现多域名不同文件的调用方法
Jan 12 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
bootstrap手风琴折叠示例代码分享
May 22 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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网页后退不再出现过期
2007/03/08 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
php把数组值转换成键的方法
2015/07/13 PHP
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
python 进程池pool使用详解
2020/10/15 Python
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
中文师范生自荐信
2014/01/30 职场文书
校园活动宣传方案
2014/03/28 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
教育见习报告范文
2014/11/03 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
会议通知
2015/04/15 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
2016情人节宣传语
2015/07/14 职场文书
高一军训口号
2015/12/25 职场文书
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫
box-shadow单边阴影的实现
2023/05/21 HTML / CSS