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的弹出层且其内的窗口居中
May 14 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
Vue底层实现原理总结
Feb 17 Javascript
详解vue组件基础
May 04 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
react合成事件与原生事件的相关理解
May 13 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
是否存在第一台收音机的说法
2021/03/01 无线电
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php数组键值用法实例分析
2015/02/27 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
深入解析Python编程中super关键字的用法
2016/06/24 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python判断完全平方数的方法
2018/11/13 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
基于python监控程序是否关闭
2020/01/14 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
python基于opencv 实现图像时钟
2021/01/04 Python
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
Android面试题及答案
2015/09/04 面试题
机关作风建设剖析材料
2014/10/11 职场文书
呐喊读书笔记
2015/06/30 职场文书
同事离别感言
2015/08/04 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang