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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
vue一步步实现alert功能
Jul 05 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 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将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
Python max内置函数详细介绍
2016/11/17 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
python获取array中指定元素的示例
2019/11/26 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
写求职信有哪些注意事项
2014/05/08 职场文书
反腐倡廉标语
2014/06/24 职场文书
校长一岗双责责任书
2015/05/09 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python
PHP正则表达式之RCEService回溯
2022/04/11 PHP