仅当元素需要滚动时才添加类

Question

我想在元素中添加一个类，但前提是内容需要用户滚动。

有问题的元素会响应屏幕大小，因此只需要用户滚动较小的屏幕尺寸。我想在这种情况下为元素添加不同的样式，而不是在内容适合而不滚动时。

我不确定如何做到这一点，但我相信那里会有一个js / jquery解决方案！

Answer 1

对于给定的元素，请使用id＆＃34; MyId＆＃34;你可以这样做：

if ( $('#MyId')[0].scrollHeight > $('#MyId').innerHeight() )
{
    $('#MyId').addClass('myClass');
}

说明：

• scrollHeight

这是元素内容的高度，包括由于溢出而无法看到的内容。

• 的 innerHeight

这是元素内容的实际高度，包括顶部和底部填充，并考虑到水平溢出。

而不是

• 的 clientHeight

这是相同的，但没有考虑水平溢出。

Answer 2

这样的事情应该有效。基本上你检查元素的实际高度是否大于它的可见高度。

if($(element).innerHeight() < $(element)[0].scrollHeight) {
    $(element).addClass('scrollable-div');
}

Answer 3

只需添加.scroll功能，如果您不滚动，它就无法发挥作用。

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 0) {
        // do something
    }

});