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

Question

我正在开发一个自定义的 knockout 绑定(bind)，它确定某个特定元素是否正在滚动，并使用元素相对于视口(viewport)的顶部更新绑定(bind)的可观察对象。现在，绑定(bind)似乎有效，但我担心是否在某些情况下无效。

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

JS:

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

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

如果文档结构如下，那么我正在寻找的是:

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

Answer 1

你想知道一个元素是曾经可以滚动还是当前可以滚动？

元素可以滚动吗？

如果一个元素有一个固定的 height 就可以滚动(或 max-height )和 overflow-y是scroll或 auto .但是因为不容易tell if an element's height is fixed or not , 可能只检查 overflow-y 就足够了:

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

元素现在可以滚动吗？

如果 scrollHeight 元素现在可以滚动大于它的 clientHeight如果有滚动条，可以通过比较clientWidth来判断。和 offsetWidth (考虑边距和边框)或检查是否 overflow-y是scroll或 auto .