Как я могу определить, прокручивается ли div вниз?

86

Как определить без использования jQuery или любой другой библиотеки JavaScript, прокручен ли div с вертикальной полосой прокрутки до конца вниз?

Мой вопрос не в том, как прокрутить вниз. Я знаю, как это сделать. Я хочу определить, прокручен ли уже div вниз.

Это не работает:

if (objDiv.scrollTop == objDiv.scrollHeight) 
Bjorn
источник
просто догадываюсь, если (objDiv.scrollTop> objDiv.scrollHeight) И может потребоваться уменьшить из scrollHeight размер стрелки прокрутки (скажем,
20 пикселей

Ответы:

107

Вы довольно близки к употреблению scrollTop == scrollHeight.

scrollTop относится к верхней части позиции прокрутки, которая будет scrollHeight - offsetHeight

Ваш оператор if должен выглядеть так (не забудьте использовать тройное равенство):

if( obj.scrollTop === (obj.scrollHeight - obj.offsetHeight))
{
}

Изменить: исправил мой ответ, был совершенно неправильным

Джеймс Дэвис
источник
4
Это почти работает, scrollHeight-offsetHeight не совсем то же значение, что scrollTop, но после попытки вашего кода, если мне нужно, если эта разница меньше 5 пикселей, чтобы она была внизу, я получаю желаемое поведение.
Бьорн
1
это не совсем так. obj.borderWidth необходимо учитывать
цикл
2
Я предпочитаю этот ответ: stackoverflow.com/questions/5828275/…
Крис,
3
scrollTopможет быть нецелым, поэтому требуется некоторая терпимость (скажем obj.scrollHeight - obj.offsetHeight - obj.scrollTop < 1), чтобы работать при любых обстоятельствах. См. Stackoverflow.com/questions/5828275/…
Крис Мартин
возможно, это имеет какое-то отношение к фиксированным элементам в моем макете или что-то еще странное, что я делаю, но единственный раз, когда это оценивается как истинное, - это когда я прокручиваю полностью вверх. Это потому, что в моем экземпляре (Chrome) document.body.scrollHeightравныdocument.body.offsetHeight
Эван де ла Крус
26

Чтобы получить правильные результаты при учете таких вещей, как возможность границы, горизонтальной полосы прокрутки и / или количества плавающих пикселей, вы должны использовать ...

el.scrollHeight - el.scrollTop - el.clientHeight < 1

ПРИМЕЧАНИЕ. Вы ДОЛЖНЫ использовать clientHeight вместо offsetHeight, если хотите получить правильные результаты. offsetHeight даст вам правильные результаты только тогда, когда el не имеет границы или горизонтальной полосы прокрутки

Спенсер
источник
Также единственный ответ, который сработал для меня. Я использую отступы, чтобы скрыть полосу прокрутки.
Craig
clientHeight работал очень хорошо. использование offsetHeight в принятом ответе дало мне результат, который не был точным на 100%
Finlay Roelofs
элегантно, спасибо .. вы также можете использовать его с Vue в событии прокрутки, а @scroll="scrolling"затем в методах scrolling(event) { event.target // as el in the answer }Удачи
Яссин Седрани
10

Немного поздно для этой вечеринки, но ни один из приведенных выше ответов, похоже, не работает особенно хорошо, когда ...

  • Масштабирование дисплея применяется к ОС для дисплеев UHD
  • Масштабирование / масштабирование применяется к браузеру

Чтобы учесть все обстоятельства, вам нужно округлить вычисленную позицию прокрутки в большую сторону:

Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight
Мэтью Лейтон
источник
Это первый ответ, который работает правильно (я также проверил ответы на stackoverflow.com/q/5828275 ). Как уже упоминалось, в игру вступают поля, масштабирование и другие факторы - и, похоже, это решает все. Изменить: ответ Спенсера ниже кажется в основном таким же, также правильным.
Ян Брадач
8

Возвращает true, если элемент находится в конце прокрутки, и false, если это не так.

element.scrollHeight - element.scrollTop === element.clientHeight

Сеть разработчиков Mozilla

Эммануэль Осимосу
источник
2
Для меня, использующего Chrome, где элементом является document.body, это не работает. document.body.scrollHeightи document.bodyclientHeightимеют одинаковое значение, поэтому выражение никогда не будет истинным.
Эван де ла Крус,
Какое редактирование мы можем сделать, чтобы мы могли обнаружить, что прокрутка находится внизу. Например, если прокрутка ниже 75%, считайте, что она ближе к низу
iamsaksham
0
<!DOCTYPE HTML> 
<html> 
<head> 
    <title>JQuery | Detecting when user scrolls to bottom of div. 
    </title> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 

<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">  
            Data Center  
        </h1> 
    <p id="data_center" style="font-size: 17px; font-weight: bold;"></p> 
    <center> 
        <div class="div" style="width:200px; height:150px; overflow:auto;"> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
        </div> 
    </center> 
    <script> 
        $('#data_center').text('Scroll till bottom to get alert!'); 
        jQuery(function($) { 
            $('.div').on('scroll', function() { 
                if ($(this).scrollTop() + $(this).innerHeight() >=  $(this)[0].scrollHeight) {                     
                    alert('End of DIV has reached!'); 
                } 
            }); 
        }); 
    </script> 
</body> 

</html> 

У меня работает, надеюсь, это вам тоже поможет. Благодарю.

Камлеш
источник
0

Что ж, я задал себе то же самое, и я нашел такой способ, здесь я помещаю пример с использованием события:

let scrollableElement = document.querySelector(".elementScrollable")

scrollableElement.addEventListener("scroll",function(event){
  if(event.target.scrollTop === event.target.scrollTopMax){
        console.log("The scroll arrived at bottom")
  }
})
Эллиот Уильямсон
источник
0

Этот мне подходит. Немного другой подход.

if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
    return 'scrollOnTheBottom';
}
Алекс Грюнвальд
источник