如何确定“html”或“body”是否滚动窗口答案

【问题标题】：How to determine if "html" or "body" scrolls the window如何确定“html”或“body”是否滚动窗口
【发布时间】：2011-02-19 16:46:56
【问题描述】：

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

    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);

当document 的高度大于window 的高度时，此代码可以完美运行。但是，当document 的高度等于或小于window 时，上述方法将不起作用，因为scrollTop() 将始终等于0。如果DOM 被更新，代码运行后document 的高度超过了window 的高度。

另外，我通常不会等到 document.ready 设置我的 javascript 处理程序（这通常有效）。我可以在body 上临时附加一个高 div，以强制上述方法正常工作，但需要在 IE 中准备好文档（您不能在之前向 body 元素添加节点标签已关闭）。有关document.ready“反模式”主题read this的更多信息。

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

【问题讨论】：

为什么不使用 if ($el.scrollTop() >= 0) ？编辑：哇刚刚意识到这个问题太老了

标签： javascript jquery cross-browser scroll

【解决方案1】：

我问这个问题已经有 5 年了……但迟到总比没有好！

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

通过Mathias Bynens 和Diego Perini 使用this polyfill。

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

/*
 * 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

【讨论】：