`
JLK
  • 浏览: 236185 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Chrome 对document.documentElement.scrollTop不识别

阅读更多

 

       最近做一个瞬间信息显示浮动层时,IE、Firefox下都能显示正常,但Chrome下出现了浮动层永远显示在上面,经过仔细分析,发现Chrome对document.documentElement.scrollTop的识别会出现误差。不过加上document.body.scrollTop后,则显示正常。

  网友提示:由于document.documentElement.scrollTop和document.body.scrollTop在标准模式或者是奇怪模式下都只有一个会返回有效的值,所以都加上也不会有问题(看来上面的问题是Chrome可能把文档当作非标准文档来解析了)。

  即获取高度时使用document.documentElement.scrollTop+document.body.scrollTop,经测试,代码在IE、Firefox、Chrome下都能显示正常了。

分享到:
评论
1 楼 illinna 2012-06-05  
mark之

相关推荐

    火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    如果不可用,则根据浏览器的兼容模式选择`document.documentElement.scrollTop`或`document.body.scrollTop`。 ### 结论 综上所述,理解和解决`document.body.scrollTop`和`document.documentElement.scrollTop`的...

    document.documentElement && document.documentElement.scrollTop

    在JavaScript中,`document.documentElement` 和 `document.documentElement.scrollTop` 是两个非常重要的属性,它们与网页文档的DOM(Document Object Model)交互,特别是涉及到页面滚动时的行为。本文将深入讲解...

    document.body.scrollTop用法

    - 对于大多数现代浏览器(如 Chrome、Firefox、Safari),使用 `document.documentElement.scrollTop` 来获取页面的滚动位置更为可靠。 ```javascript var scrollTop = document.documentElement.scrollTop; ``` ...

    javascript scrollTop正解使用方法

    在实际应用中经常会遇到以下问题:document.documentElement.scrollTop在Chrome里总为0document.body.scrollTop 在IE和firefox里总为01、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/...

    关于window.pageYOffset和document.documentElement.scrollTop

    但要注意,`document.documentElement.scrollTop` 只对`<html>`元素有效,而`document.body.scrollTop` 对`<body>`元素有效。在大多数情况下,两者的结果应该是相同的,除非页面结构复杂,导致`<body>`与`<html>`的...

    解决VUE中document.body.scrollTop为0的问题

    document.documentElement代表的是标签,因此在使用scrollTop属性时,应该使用document.documentElement.scrollTop来获取滚动条的垂直位置。 相对地,如果页面中没有DOCTYPE声明,那么浏览器通常会进入怪异模式...

    javascript document.compatMode兼容性

    1. **BackCompat**:这是怪异模式的标识,意味着浏览器将以非标准的方式解析文档,通常在没有正确DOCTYPE声明或者DOCTYPE声明不被识别时出现。 2. **CSS1Compat**:这是标准模式的标识,表明浏览器按照W3C CSS1规范...

    深化浅析JavaScript中的scrollTop_.docx

    在Chrome浏览器中,`document.body.scrollTop`和`document.documentElement.scrollTop`都可以用来获取滚动条位置。然而,IE6到IE10在没有DOCTYPE声明的页面中,推荐使用`document.body.scrollTop`,而在有DOCTYPE...

    js浮动广告实现

    通过合理运用 `window.pageYOffset`、`document.documentElement.scrollTop` 和 `document.body.scrollTop` 这些关键属性,以及适当的条件判断和逻辑处理,你可以创建出既美观又不影响用户体验的浮动广告。...

    深入浅析JavaScript中的scrollTop

    document.body.scrollTop和document.documentElement.scrollTop都可以 2、各浏览器下 scrollTop的差异 IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ; ...

    js获取浏览器高度和宽度值(多浏览器)

    - `document.body.scrollTop` 和 `document.body.scrollLeft` 用于获取当前滚动条的位置。 - `window.screenTop` 和 `window.screenLeft` 表示浏览器窗口在屏幕上的位置。 - `window.screen.height` 和 `window....

    JS获取浏览器的高度和宽度

    - `document.documentElement.clientWidth` 返回可见区域的宽度,即浏览器视口宽度,包括边框,但不包括滚动条。 - `document.documentElement.clientHeight` 返回可见区域的高度,即浏览器视口高度,包括边框,但不...

    js 获取页面高度和宽度兼容 ie firefox chrome等

    这里通过逻辑运算符`(document.documentElement && document.documentElement.scrollTop)`来检查`document.documentElement`是否存在(避免直接访问不存在的对象属性导致的错误),如果存在则使用,否则使用`...

    js中getBoundingClientRect的作用及兼容方案详解.docx

    var top = xy.top - document.documentElement.clientTop + document.documentElement.scrollTop; var bottom = xy.bottom; var left = xy.left - document.documentElement.clientLeft + document....

    解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

    在处理兼容性问题时,特别是在Firefox和Chrome浏览器之间,问题的根源在于两个浏览器对`document.body.scrollTop`和`document.documentElement.scrollTop`的支持不同。在Firefox中,对`document.body.scrollTop`的...

    滚动条事件js代码

    if (document.documentElement.scrollTop || document.body.scrollTop) { // 对于不支持scrollTop的旧版IE var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body....

    document.compatMode的CSS1compat使用介绍

    在这种模式下,如果你想要获取浏览器视口的宽度,你应该使用 `document.documentElement.clientWidth`。这是因为 `document.documentElement` 指向HTML根元素,它在标准模式下包含了整个页面的内容,包括边距和滚动...

    js获取div的位置坐标

    var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop); var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); return { x: box....

    关于scrollLeft,scrollTop的浏览器兼容性测试

    但 Chrome 的行为不同,它在标准模式下可能无法正确读取 `document.documentElement.scrollTop`,而需要使用 `document.body.scrollTop`。 为了解决这些兼容性问题,可以编写一个封装函数,如上述代码所示,来统一...

Global site tag (gtag.js) - Google Analytics