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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
js实现轮播图特效
May 28 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 模拟$_PUT实现代码
2010/03/15 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
php格式文件打开的四种方法
2018/02/24 PHP
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
JS常见算法详解
2017/02/28 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
jQuery实现动态操作table行
2020/11/23 jQuery
Python多进程同步简单实现代码
2016/04/27 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
Python线性方程组求解运算示例
2018/01/17 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
电大自我鉴定范文
2013/10/01 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
社区八一活动方案
2014/02/03 职场文书
执行总经理岗位职责
2014/02/03 职场文书
《草船借箭》教学反思
2016/02/23 职场文书