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

Question 1

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

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

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

if (objDiv.scrollTop == objDiv.scrollHeight)

Question 2

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

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

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

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

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

Question 3

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

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

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

Question 4

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

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

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

Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight

Question 5

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

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

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

Question 6

<!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>

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

Question 7

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

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

scrollableElement.addEventListener("scroll",function(event){
  if(event.target.scrollTop === event.target.scrollTopMax){
        console.log("The scroll arrived at bottom")
  }
})

Question 8

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

if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
    return 'scrollOnTheBottom';
}

Question 9

Решение, которое я нашел на https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div/ , сработало для меня, надеюсь, оно сработает и для вас .

$(window).on('scroll', function() { 
    if ($(window).scrollTop() >= $( 
        '.div').offset().top + $('.div'). 
        outerHeight() - window.innerHeight) { 
            alert('You reached the end of the DIV'); 
        } 
});

Answer 1

86

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

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

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

if (objDiv.scrollTop == objDiv.scrollHeight)

javascript scroll scrollbar Bjorn
источник

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

20 пикселей

некоторая документация: developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight ... ... ... developer.mozilla.org/en-US/docs/Web/API/HTMLElement/… ... ... ... api.jquery.com/height ... ... ... api.jquery.com/innerheight ... ... ... api.jquery.com/outerheight

Мухаммед Umer

Answer 2

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

20 пикселей

Answer 3

некоторая документация: developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight ... ... ... developer.mozilla.org/en-US/docs/Web/API/HTMLElement/… ... ... ... api.jquery.com/height ... ... ... api.jquery.com/innerheight ... ... ... api.jquery.com/outerheight

Мухаммед Umer

Answer 4

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

Эван де ла Крус

Answer 5

4

Это почти работает, scrollHeight-offsetHeight не совсем то же значение, что scrollTop, но после попытки вашего кода, если мне нужно, если эта разница меньше 5 пикселей, чтобы она была внизу, я получаю желаемое поведение.

Бьорн

Answer 6

1

это не совсем так. obj.borderWidth необходимо учитывать

цикл

Answer 7

2

Я предпочитаю этот ответ: stackoverflow.com/questions/5828275/…

Крис,

Answer 8

3

scrollTopможет быть нецелым, поэтому требуется некоторая терпимость (скажем obj.scrollHeight - obj.offsetHeight - obj.scrollTop < 1), чтобы работать при любых обстоятельствах. См. Stackoverflow.com/questions/5828275/…

Крис Мартин

Answer 9

возможно, это имеет какое-то отношение к фиксированным элементам в моем макете или что-то еще странное, что я делаю, но единственный раз, когда это оценивается как истинное, - это когда я прокручиваю полностью вверх. Это потому, что в моем экземпляре (Chrome) document.body.scrollHeightравныdocument.body.offsetHeight

Эван де ла Крус

Answer 10

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 }Удачи

Яссин Седрани

Answer 11

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

Craig

Answer 12

clientHeight работал очень хорошо. использование offsetHeight в принятом ответе дало мне результат, который не был точным на 100%

Finlay Roelofs

Answer 13

элегантно, спасибо .. вы также можете использовать его с Vue в событии прокрутки, а @scroll="scrolling"затем в методах scrolling(event) { event.target // as el in the answer }Удачи

Яссин Седрани

Answer 14

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

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

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

Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight

Answer 15

Это первый ответ, который работает правильно (я также проверил ответы на stackoverflow.com/q/5828275 ). Как уже упоминалось, в игру вступают поля, масштабирование и другие факторы - и, похоже, это решает все. Изменить: ответ Спенсера ниже кажется в основном таким же, также правильным.

Ян Брадач

Answer 16

8

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

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

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

Эммануэль Осимосу
источник

2

Для меня, использующего Chrome, где элементом является document.body, это не работает. document.body.scrollHeightи document.bodyclientHeightимеют одинаковое значение, поэтому выражение никогда не будет истинным.

Эван де ла Крус,

Какое редактирование мы можем сделать, чтобы мы могли обнаружить, что прокрутка находится внизу. Например, если прокрутка ниже 75%, считайте, что она ближе к низу

iamsaksham

Answer 17

2

Для меня, использующего Chrome, где элементом является document.body, это не работает. document.body.scrollHeightи document.bodyclientHeightимеют одинаковое значение, поэтому выражение никогда не будет истинным.

Эван де ла Крус,

Answer 18

Какое редактирование мы можем сделать, чтобы мы могли обнаружить, что прокрутка находится внизу. Например, если прокрутка ниже 75%, считайте, что она ближе к низу

iamsaksham

Answer 19

<!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>

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

Answer 20

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

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

scrollableElement.addEventListener("scroll",function(event){
  if(event.target.scrollTop === event.target.scrollTopMax){
        console.log("The scroll arrived at bottom")
  }
})

Answer 21

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

if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
    return 'scrollOnTheBottom';
}

Answer 22

Решение, которое я нашел на https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div/ , сработало для меня, надеюсь, оно сработает и для вас .

$(window).on('scroll', function() { 
    if ($(window).scrollTop() >= $( 
        '.div').offset().top + $('.div'). 
        outerHeight() - window.innerHeight) { 
            alert('You reached the end of the DIV'); 
        } 
});

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

Ответы: