Добавить класс, только если элемент требует прокрутки

Question

Я ищу, чтобы добавить класс к элементу, но только если содержание требует, чтобы пользователь прокручивал.

Элемент, о котором идет речь, отвечает на размер экрана, поэтому пользователю потребуется только прокрутка на меньших размерах экрана. Я хотел бы добавить разные стили к элементу только в этом случае, а не когда содержимое будет соответствовать без прокрутки.

Я не уверен, как это сделать, но я уверен, что там будет решение js/jquery!

Answer 1

Для данного элемента, скажем, с идентификатором "MyId" вы можете сделать это:

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 
    } 

});