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 相关文章推荐
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
jQuery插件之validation插件
Mar 29 jQuery
javascript  删除select中的所有option的实例
Sep 17 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
vue前端工程的搭建
Mar 31 Vue.js
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
DedeCms模板安装/制作概述
2007/03/11 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP实现的日历功能示例
2018/09/01 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
医学生个人求职信范文
2013/09/24 职场文书
《乌塔》教学反思
2014/02/17 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
酒会开场白大全
2015/06/01 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
九年级化学教学反思
2016/02/22 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers