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 相关文章推荐
IE下js调试工具Companion.JS
Oct 15 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
小程序实现列表展开收起效果
Jul 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
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
使用python进行拆分大文件的方法
2018/12/10 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
Python 合并拼接字符串的方法
2020/07/28 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
简历中个人求职的自我评价模板
2013/11/29 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
晚宴邀请函范文
2014/01/15 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
关于Numpy之repeat、tile的用法总结
2021/06/02 Python