document.documentElement.scrollTop||document.body.scrollTop;

这两天在写一个JS的网页右键菜单，在实现菜单定位的时候发现了这个问题：chrome居然不认识document.documentElement.scrollTop！

看前辈们的文章，纷纷表示如果有文档声明（即网页第一句的docType）的情况下，标准浏览器是只认识documentElement.scrollTop的，但chrome虽然我感觉比firefox还标准，但却不认识这个，在有文档声明时，chrome也只认识document.body.scrollTop.

由于在不同情况下，document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值，那到底网页的scrollTop值怎么得到呢？难道又要用javascript进行判断？

其实不必。因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候，document.documentElement.scrollTop就会始终为0；反之亦然。所以，如果要得到网页的真正的scrollTop值，可以这样：

var sTop=document.body.scrollTop+document.documentElement.scrollTop;

这两个值总会有一个恒为0，所以不用担心会对真正的scrollTop造成影响。一点小技巧，但很实用。

时间： 2024-10-25 01:48:54

document.documentElement.scrollTop||document.body.scrollTop;的相关文章

document.documentElement和document.body 与document.compatMode的关系

首先我们看看document.compatMode(兼容模式): document.compatMode它有两种可能的返回值:BackCompat和CSS1Compat, document.compatMode的使用,感觉这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声

IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight

IEdocument.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度document.documentElement.scrollTop  浏览器滚动部分高度,document.body.scrollTop 始终为0document.documentElement.clientHeight  浏览器可视部分高度,document.body.clientHeight  浏览器所有内容高度

document.documentElement和document.body区别

body是DOM对象里的body子节点,即body标签, documentElement 是整个节点树的根节点root, 详细介绍请看本文,感兴趣的朋友可以参考下 区别: body是DOM对象里的body子节点,即 <body> 标签: documentElement 是整个节点树的根节点root,即<html> 标签: 没使用DTD情况即怪异模式BackCompat下: document.documentElement.clientHeight=0 document.body.c

document.documentElement和document.body区别以及获取浏览器的宽高

原文:http://www.jb51.net/article/41410.htm 1.区别: body是DOM对象里的body子节点,即 <body> 标签: documentElement 是整个节点树的根节点root,即<html> 标签: 2.没使用DTD情况即怪异模式BackCompat下: 代码如下: document.documentElement.clientHeight=0document.body.clientHeight=618 使用DTD情况即标准模式CSS1

document.documentElement和document.body区别介绍

if (document.compatMode == "BackCompat") { cWidth = document.body.clientWidth; cHeight = document.body.clientHeight; sWidth = document.body.scrollWidth; sHeight = document.body.scrollHeight; sLeft = document.body.scrollLeft; sTop = document.body

document.documentElement和document.body的区别

网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div> window.onscroll = function () { var div = document.getElementById(&quo

【转载】document.documentElement和document.body的区别

网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div> window.onscroll = function () { var div = document.getElementById(&quo

【转】document.documentElement和document.body的区别

网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div> window.onscroll = function () { var div = document.getElementById(&quo

一句话理解innerHeight，(document.documentElement，document.body) / clientHeight，offsetHeight的区别和用法

要理解这几个属性,首先要搞明白body,documentElement的区别 1.body是DOM对象里的body子节点,即<body>标签2.documentElement是整个节点树的跟节点,即<html>标签 ========================下面都是废话================================== 很多人都认为body和html是一样的,判断依据就是给body加背景颜色后,整个网页文档都会跟着变色.其实这种现象并不能说明body和htm

document.documentElement 和 document.body

MDN : The Document.documentElement read-only property returns the Element that is the root element of the document (for example, the <html> element for HTML documents) . 层级关系: 1. document 2. documentElement(html) 3. head, body