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插件validate验证的小例子
May 08 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
详解vue-cli3使用
Aug 14 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
Yii2中datetime类的使用
2016/12/17 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Django 前后台的数据传递的方法
2017/08/08 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
Python3实现二叉树的最大深度
2019/09/30 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
Python如何使用input函数获取输入
2020/08/06 Python
python中time.ctime()实例用法
2021/02/03 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
岗位竞聘演讲稿
2014/01/10 职场文书
选秀节目策划方案
2014/06/06 职场文书
银行求职自荐信
2014/06/30 职场文书
庆七一活动总结
2014/08/27 职场文书
贪污检举信范文
2015/03/02 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
pandas求平均数和中位数的方法实例
2021/08/04 Python