- 浏览: 448785 次
- 性别:
- 来自: 成都
文章分类
- 全部博客 (377)
- Java (66)
- C++ (0)
- VC++ (0)
- .net (1)
- css (36)
- 数据库 (22)
- html (2)
- extjs (1)
- jpbm (0)
- javascript (31)
- 物资管理 (1)
- java基础 (5)
- C# (0)
- Android (56)
- window service (1)
- 其他 (2)
- Web服务器 (7)
- jbpm (1)
- eclipse (2)
- tomcat (3)
- java字符串与二进制的相互转化 (1)
- Oracle 数据库 (6)
- FreeMarker (8)
- 浏览器 (1)
- php (1)
- photoshop (6)
- spring (4)
- spring mvc (2)
- Acegi (1)
- webStorm 3.0 (4)
- Mongodb (8)
- mysql (9)
- 软件开发:需求分析 (1)
- 把Java程序作为Windows系统服务 (1)
- nodejs (4)
- json (1)
- 缓存 (1)
- J2ee (2)
- Flash报表 (1)
- MyEclipse+Maven+Tomcat (11)
- 生活 (1)
- Ubuntu (1)
- Bootstrap (1)
- jquery easy ui (2)
- 敏捷开发 (1)
- phone gap (1)
- rest (1)
- 移动开发 (22)
- Redis + Jedis + Spring (3)
- anroid (7)
- grunt 教程 (7)
- PhoneGap (2)
- sublime text (7)
- mariadb (1)
- linux (1)
- maven (2)
- jquery (1)
- ActiveMQ (1)
- LVS Nginx (1)
- nginx (6)
- ngnix (1)
- 爱因斯坦 (1)
- 天干地支 (1)
最新评论
-
muqingren:
...
Maven多模块布局实例详解 -
shutear:
解决了我的难题,谢谢分享!
Unable to load configuration. - action - file:/D:/studytool/apache-tomcat-6.0.16 -
702346318:
[img][/img][flash=200,200][/fla ...
CAS单点登录完整教程(上)【转】 -
liuguofeng:
PersonS631887934 写道学习中。。 有个问题想请 ...
js constructor属性 -
S631887934:
学习中。。 有个问题想请教楼主为什么要加上Person.pro ...
js constructor属性
网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动:
<div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div> window.onscroll = function () { var div = document.getElementById("div"); div.style.top = document.body.scrollTop + "px"; }
运行后没有达到预期效果,输出 document.body.scrollTop 的值一看,一直都是 0。一翻折腾,原来是 DTD 的问题,要是页面直接用 <html> 开头的话就没有问题了。但是要符合 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相关说明:
页面具有 DTD,或者说指定了 DOCTYPE 时,使用 document.documentElement。
页面不具有 DTD,或者说没有指定了 DOCTYPE,时,使用 document.body。
在 IE 和 Firefox 中均是如此。
为了兼容,不管有没有 DTD,可以使用如下代码:
var scrollTop = window.pageYOffset //用于FF || document.documentElement.scrollTop || document.body.scrollTop || 0;
documentElement 和 body 相关说明:
body是DOM对象里的body子节点,即 <body> 标签;
documentElement 是整个节点树的根节点root,即<html> 标签;
DOM把层次中的每一个对象都称之为节点,就是一个层次结构,你可以理解为一个树形结构,就像我们的目录一样,一个根目录,根目录下有子目录,子目录下还有子目录。
以HTML超文本标记语言为例:整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它,它就是整个节点树的根节点。而body是子节点,要访问到body标签,在脚本中应该写:document.body。
发表评论
-
Array.prototype.slice.call
2014-11-01 15:18 759在研究某个框架源码的时候,看到的。查了下资料,1.两个部分, ... -
深入理解jQuery插件开发
2014-11-01 12:17 499如果你看到这篇文章,我确信你毫无疑问会认为jQuery是一个 ... -
jquery 控制能输入数字和字母
2014-10-18 15:37 714内容",而"禁用输入法,获取剪切板的内 ... -
值得收藏的新jQuery插件
2014-09-25 22:39 6991) slideshow Really Simple S ... -
窗口大小 window.innerWidth 、window.innerHeight、document.documentElement.clientWidth、
2014-07-27 09:52 905/ Firefox、Chrome、Safari、Opera ... -
精选在线课程:前端开发入门、进阶与实战(中文系列)
2014-07-26 22:06 0在线教育的浪潮吸引了越来越多的网站加入,争相推出各种课程吸引 ... -
浏览器缓存机制
2014-07-26 13:19 660浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: ... -
JavaScript中双叹号“!!”作用
2014-07-25 23:20 492经常看到这样的例子: var a;var b=!!a; ... -
js中style,currentStyle和getComputedStyle的区别
2014-07-13 09:51 777<style> body{margin:0 a ... -
JS OffsetParent属性
2014-06-14 11:12 679offsetParent属性返回一个对象的引用,这个对象 ... -
javascript两行代码按指定格式输出日期时间
2014-05-11 14:33 652// <summary>// 格式化显示日期时间/ ... -
Js中sort()方法的用法
2012-10-12 11:25 1101关键字: sort, 排序方 ... -
网页常用特效整理
2012-04-21 17:37 9481.节日倒计时 < ... -
jquery validate自定义验证方法(转)
2012-03-30 10:55 1061// 身份证号码验证 jQuery.validator ... -
document.compatMode属性
2012-03-13 11:58 926document.compatMode用来判断当前浏览器采 ... -
js库建设方案
2012-03-13 11:58 1074前言: 自从互联网诞生之日起,JavaScript就成为 ... -
关于scrolltop 兼容 IE6/7/8, Safari,FF的方法
2012-03-13 11:57 22051、各浏览器下 scrollTop的差异IE6/7/8 ... -
IE内存泄露监测工具 sIEve介绍
2012-03-08 10:23 1273在IE下监控页面内存资 ... -
网站优化之Ajax优化及相关工具
2012-03-08 09:56 1015web2.0大量的ajax的使用,提高了ui交互的效率,但 ... -
javascript操作Select标记中options集合
2012-03-04 22:36 778先来看看options集合的这几个方法: options.a ...
相关推荐
在探讨“火狐、谷歌、IE关于`document.body.scrollTop`和`document.documentElement.scrollTop`以及值为0的问题”这一主题时,我们深入分析了浏览器在处理页面滚动位置时的不同行为,尤其是当滚动位置值始终为0时的...
在JavaScript的DOM操作中,document.documentElement 和 document.body 是两个非常重要的属性,它们分别代表了文档的不同部分。理解这两者之间的区别对于前端开发者来说至关重要,尤其是在进行页面布局和滚动操作时...
在标准模式下,则需要先判断document.documentElement.scrollLeft和document.documentElement.scrollTop是否为0,若是则使用document.body.scrollLeft和document.body.scrollTop。 了解了这些区别后,前端开发者在...
- 使用 `event.clientX` 和 `event.clientY` 获取鼠标相对于视口的位置,但若想得到相对于整个文档的位置,则需加上 `document.documentElement.scrollTop` 或 `document.documentElement.scrollLeft`。 ```...
在JavaScript中,`document.documentElement` 和 `document.documentElement.scrollTop` 是两个非常重要的属性,它们与网页文档的DOM(Document Object Model)交互,特别是涉及到页面滚动时的行为。本文将深入讲解...
3. **与window对象的scrollY区别**:虽然 `window.scrollY` 和 `document.body.scrollTop` 在很多情况下结果相同,但它们并不完全等价。`window.scrollY` 返回的是整个窗口(包括顶部固定元素)相对于浏览器顶部的...
页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement。 页面没有DTD,即没指定DOCTYPE时,使用document.body。 IE和Firefox都是如此。 以上这篇解决VUE中document.body.scrollTop为0的问题就是小编分享...
- 使用`document.write('<body></body>')`来清除页面上的所有内容,并重新插入一个空的`<body>`标签。 - 这一步是必要的,因为如果直接修改现有文档的内容而不进行清空操作,可能会导致布局错乱或意料之外的结果。...
if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape ...
下面将详细探讨`document.documentElement`的一些使用技巧和应用场景。 1. 访问根元素属性: `document.documentElement` 可以让我们访问到根元素的属性,比如`nodeName`,它返回元素的标签名(在这个例子中是`...
在标准模式下,浏览器倾向于使用`document.documentElement.scrollTop`来获取页面的滚动位置,而不是`document.body.scrollTop`。 `document.documentElement` 指的是HTML文档的根元素,即`<html>`标签。在标准模式...
上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。 那我们怎么办呢?难道加上了文档...
- 在 Firefox 和 Opera 中,`document.documentElement.clientWidth`和`document.documentElement.clientHeight`分别表示页面宽度减去`BODY`的外边距(`margin`)后的宽度和高度。 为了确保代码的兼容性,开发者在...
在Web开发中,理解和掌握`document.body`和`document.documentElement`的区别至关重要,尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分:`document.body`指的是HTML文档的实际内容...
这个函数通过检查 `document.documentElement.scrollTop` 和 `document.body.scrollTop` 来确定滚动条的位置。在不同的浏览器中,这两个属性可能有不同的行为,因此需要进行条件判断来确保兼容性。 ```javascript ...
在标准模式下,IE和Firefox等现代浏览器倾向于遵循W3C标准,其中规定应该使用`document.documentElement.scrollTop`来获取整个页面的滚动位置,而不是`document.body.scrollTop`。因此,当你尝试通过`document.body....
但需要注意的是,对于IE5.5及更高版本,需要特别处理`document.body.scrollLeft`和`document.documentElement.scrollLeft`,以及`document.body.scrollTop`和`document.documentElement.scrollTop`,以确保在所有...