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 prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
javascript StringBuilder类实现
Dec 22 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
javascript类型转换示例
Apr 29 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
js实现简单点赞操作
Mar 17 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 base64编码后解码乱码的解决办法
2014/06/19 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
Python代码注释规范代码实例解析
2020/08/14 Python
python logging模块的使用详解
2020/10/23 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
以下的初始化有什么区别
2013/12/16 面试题
应届毕业生的自我鉴定
2013/11/13 职场文书
采购主管岗位职责
2014/02/01 职场文书
2014年元旦活动方案
2014/02/15 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
商业街策划方案
2014/05/31 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
python解析json数据
2022/04/29 Python