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 相关文章推荐
JavaScript中的undefined学习总结
Nov 30 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
node中使用shell脚本的方法步骤
Mar 23 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中使用XML
2006/10/09 PHP
一个显示天气预报的程序
2006/10/09 PHP
网友原创的PHP模板类代码
2008/09/07 PHP
php类中private属性继承问题分析
2012/11/01 PHP
php学习笔记之面向对象
2014/11/08 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
javascript读取xml
2006/11/04 Javascript
js调用flash的效果代码
2008/04/26 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
js实现密码强度检验
2017/01/15 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
Python有序字典简单实现方法示例
2017/09/28 Python
Python中实现switch功能实例解析
2018/01/11 Python
Python实现的购物车功能示例
2018/02/11 Python
Python 多维List创建的问题小结
2019/01/18 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
如何提高MySql的安全性
2014/06/19 面试题
小学庆六一活动方案
2014/02/28 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS