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

Question

我正在寻找向元素添加类，但前提是内容需要用户滚动。

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

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

Answer 1

对于给定的元素，让我们用一个ID说的 “身份识别码”，你可以这样做：

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 
    } 

});