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+JQuery返回顶部功能如何实现
Dec 03 Javascript
Javascript 命名空间模式
Nov 01 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
vue实现全选和反选功能
Aug 31 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
js实现网页随机验证码
Oct 19 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中date()日期函数有关参数整理
2011/07/19 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
公司部门司机岗位职责
2014/01/03 职场文书
2014年老干部工作总结
2014/11/21 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android