如何准确判断一个元素是否可滚动？

Question

我正在研究自定义敲除绑定，它确定特定元素是否正在滚动，并使用元素相对于视口的顶部更新绑定的可观察对象。现在，绑定似乎有效，但我担心是否在某些情况下无效。

HTML:

 Scroll position: <span data-bind="text: scrollPosition"></span>

<div class="longdiv">
    <p data-bind="scroll: scrollPosition">This is some text.</p>
    <div class="shim"></div>
</div>

CSS：

 .longdiv {
    width: 200px;
    height: 200px;
    overflow: scroll;
    border: 1px solid black;
}

记者：

 ko.bindingHandlers.scroll = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var firstScrollableContainer = null;

        var binding = allBindings.get('scroll');

        $(element).parents().each(function (i, parent) {
            if ($(parent).css('overflow')=='scroll') {
                firstScrollableContainer = parent;
                return false;
            }
        });

        firstScrollableContainer = firstScrollableContainer || window;

        binding(element.getBoundingClientRect().top);

        $(firstScrollableContainer).scroll(function() {
            binding(element.getBoundingClientRect().top);
        });
    }
};

var ViewModel = function() {
    var self = this;

    self.scrollPosition = ko.observable(0);
};

ko.applyBindings(new ViewModel());

JSFiddle

绑定采用元素并使用 jQuery 遍历父链，查看父元素是否设置了 overflow: scroll。如果它找到一个带有 overflow: scroll 的 div，它会将一个事件处理程序绑定到该元素的滚动事件。如果它没有找到带有 overflow: scroll 的父对象，它就会绑定到窗口的滚动事件。

所以我在寻找什么，给定一个结构如下的文档：

 body > div > div > div > p

是最接近 p 的可以滚动的包含元素，因此我可以将事件处理程序附加到它。

我的问题是：正在查看 overflow: scroll 是否足以测试父元素是否可以滚动？如果没有，我应该看什么？

编辑：根据您的有用评论和答案，这是我想出的解决方案：

 function scrollable(element) {
    var vertically_scrollable, horizontally_scrollable;

    var e = $(element);

     if (   e.css('overflow') == 'scroll'
         || e.css('overflow') == 'auto'
         || e.css('overflowY') == 'scroll'
         || e.css('overflowY') == 'auto'
         || e.css('height') != 'none'
         || e.css('max-height') != 'none'
         ) {
         return true;
    } else {
        return false;
    }
}

原文由 McCroskey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你想知道一个元素是否可以滚动或当前可以滚动吗？

元素可以滚动吗？

An element can scroll if it has a fixed height (or max-height ) and overflow-y is scroll or auto .但由于 判断元素的高度是否固定 并不容易，因此只需检查 overflow-y 可能就足够了：

 e.css('overflow-y') == 'scroll' || e.css('overflow-y') == 'auto'

元素现在可以滚动吗？

如果一个元素的 scrollHeight 大于它的 offsetWidth clientHeight 并且它有一个滚动条，这可以通过比较 clientWidth 来确定 --- (taking margins and borders into account) or checking if overflow-y is scroll or auto .

原文由 Michael Best 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这可能是最安全的解决方案（需要 jQuery，对于纯 JavaScript，请参见下文）：

 $.fn.isHScrollable = function () {
    return this[0].scrollWidth > this[0].clientWidth;
};

$.fn.isVScrollable = function () {
    return this[0].scrollHeight > this[0].clientHeight;
};

$.fn.isScrollable = function () {
    return this[0].scrollWidth > this[0].clientWidth || this[0].scrollHeight > this[0].clientHeight;
};

然后你可以像这样检查一个元素是否可滚动：

 $(parent).isScrollable();

---

对于不使用 jQuery 的用法，您可以实现如下功能：

 function isScrollable(element) {
    return element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
};

var myParent = document.getElementById('myParent')
isScrollable(myParent)

原文由 RafaelKr 发布，翻译遵循 CC BY-SA 4.0 许可协议