如何确定是否“html”或“身体”或“身体”。滚动窗口 [英] How to determine if "html" or "body" scrolls the window

问题描述

下面的代码用于查找可以通过javascript滚动的元素（正文或html）。

The code below is used to find the element that can be scrolled (body or html) via javascript.

    var scrollElement = (function (tags) {
        var el, $el, init;
        // iterate through the tags...
        while (el = tags.pop()) {
            $el = $(el);
            // if the scrollTop value is already > 0 then this element will work
            if ( $el.scrollTop() > 0){
                return $el;
            }
            // if scrollTop is 0 try to scroll.
            else if($el.scrollTop( 1 ).scrollTop() > 0) {
                // if that worked reset the scroll top and return the element
                return $el.scrollTop(0);
            }
        }
        return $();
    } (["html", "body"]));

    // do stuff with scrollElement...like:
    // scrollElement.animate({"scrollTop":target.offset().top},1000);

当文件的高度大于窗口的高度。但是，当文档的高度与窗口相同或更小时，上面的方法将不工作，因为 scrollTop（）将始终等于0.如果更新DOM并且文档的高度，这将成为问题在代码运行后超出窗口的高度。

This code works perfectly when the height of the document is greater than the height of the window. However, when the height of the document is the same or less than the window the method above will not work because scrollTop() will always be equal to 0. This becomes a problem if the DOM is updated and the height of the document grows beyond the height of the window after the code runs.

此外，我一般不要等到document.ready设置我的javascript处理程序（这通常有效）。我可以暂时将一个高div添加到正文以强制上述方法工作但是要求文档在IE中准备就绪（你在标记关闭之前无法向body元素添加节点）。有关 document.ready 反模式主题的更多信息读这个。

Also, I generally don't wait until document.ready to set up my javascript handlers (this generally works). I could append a tall div to the body temporarily to force the method above to work BUT that would require the document to be ready in IE (you can't add a node to the body element before the tag is closed). For more on the document.ready "anti-pattern" topic read this.

所以，我很想找到一个找到的解决方案即使文档很短，也可以滚动元素。有什么想法吗？

So, I'd love to find a solution that finds the scrollable element even when the document is short. Any ideas?

推荐答案

自从我提出这个问题已经过了大约5年......但是迟到总比没有好！

Its been about 5 years since I asked this....but better late than never!

document.scrollingElement 现在是CSSOM规范的一部分，但几乎没有实际的浏览器实现此时（2015年4月）。但是，你仍然可以找到元素......

document.scrollingElement is now part of the CSSOM spec, but has little to no real-world browser implementation at this point (April 2015). However, you can still find the element...

使用此polyfill 由 Mathias Bynens 和 Diego Perini 。

由Diego Perini实现这个基本解决方案（上面的polyfill更好，CSSOM兼容，所以你应该使用它。）：

Which implements this basic solution by Diego Perini (The above polyfill is better and CSSOM compliant, so you should probably use that.):

/*
 * How to detect which element is the scrolling element in charge of scrolling the viewport:
 *
 * - in Quirks mode the scrolling element is the "body"
 * - in Standard mode the scrolling element is the "documentElement"
 *
 * webkit based browsers always use the "body" element, disrespectful of the specifications:
 *
 *  http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop
 *
 * This feature detection helper allow cross-browser scroll operations on the viewport,
 * it will guess which element to use in each browser both in Quirk and Standard modes.
 * See how this can be used in a "smooth scroll to anchors references" example here:
 *
 *  https://dl.dropboxusercontent.com/u/598365/scrollTo/scrollTo.html
 *
 * It is just a fix for possible differences between browsers versions (currently any Webkit).
 * In case the Webkit bug get fixed someday, it will just work if they follow the specs. Win !
 *
 * Author: Diego Perini
 * Updated: 2014/09/18
 * License: MIT
 *
 */
function getScrollingElement() {
  var d = document;
  return  d.documentElement.scrollHeight > d.body.scrollHeight &&
          d.compatMode.indexOf('CSS1') == 0 ?
          d.documentElement :
          d.body;
}

- getScrollingElement.js

这篇关于如何确定是否“html”或“身体”或“身体”。滚动窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！