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判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
微信小程序block的使用教程
Apr 01 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
vue操作dom元素的3种方法示例
Sep 20 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
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
input 高级限制级用法
2009/03/26 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
python学习必备知识汇总
2017/09/08 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
机电一体化专业推荐信
2013/12/03 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
父母对孩子说的话
2014/04/12 职场文书
小学生优秀评语大全
2014/04/22 职场文书
2015国庆节感想
2015/08/04 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android