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 相关文章推荐
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 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判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
简单的php购物车代码
2020/06/05 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
Python实现的tcp端口检测操作示例
2018/07/24 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
Python基于locals返回作用域字典
2020/10/17 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
大二学习计划书范文
2014/04/27 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
单位租房协议书样本
2014/10/30 职场文书
出租车拒载检讨书
2015/01/28 职场文书
公司车辆管理制度
2015/08/04 职场文书
初二英语教学反思
2016/02/15 职场文书