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 表单验证大全
Nov 23 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
vue-resourc发起异步请求的方法
Feb 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中使用Oracle数据库(1)
2006/10/09 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
joomla数据库操作示例代码
2016/01/06 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
ext实现完整的登录代码
2008/08/08 Javascript
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
python常见的格式化输出小结
2016/12/15 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
python利用线程实现多任务
2020/09/18 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
师德师风个人反思
2014/04/28 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
创先争优个人总结
2015/03/04 职场文书
2015年技术工作总结范文
2015/04/20 职场文书