Как определить, достигла ли вертикальная полоса прокрутки нижней части веб-страницы?

Question

Ответ на тот же вопрос в jQUery, но я ищу решение без jQuery. Откуда вы знаете, что полоса прокрутки достигла нижней части страницы

Я хотел бы знать , как определить, достигла ли вертикальная полоса прокрутки нижняя часть веб-страницы.

Я использую Firefox3.6

Я написал простой цикл Javascript для прокрутки вниз на 200 пикселей, и когда полоса прокрутки достигла нижней части страницы, я хочу остановить цикл.

Проблема в том, что scrollHeight () возвращается в 1989 году.

А внутри цикла scrollTop увеличивается на 200 за итерацию.

200 ==> 400 ==> 600 .... 1715

А с 1715 года он не будет увеличиваться, поэтому этот цикл продолжается вечно.

Похоже, scrollHeight () и scrollTop () - неправильный способ сравнения для определения фактического положения полосы прокрутки? Как я могу узнать, когда цикл должен остановиться?

Код:

var curWindow = selenium.browserbot.getCurrentWindow();
var scrollTop = curWindow.document.body.scrollTop;
alert('scrollHeight==>' + curWindow.document.body.scrollHeight);

    while(curWindow.document.body.scrollHeight > curWindow.document.body.scrollTop) {
      scrollTop = curWindow.document.body.scrollTop;
      if(scrollTop == 0) { 
        if(window.pageYOffset) { //firefox
          alert('firefox'); 
          scrollTop = window.pageYOffset; 
        } 
        else { //IE
          alert('IE'); 
          scrollTop = (curWindow.document.body.parentElement) ? curWindow.document.body.parentElement.scrollTop : 0; 
        } 
      } //end outer if
      alert('current scrollTop ==> ' + scrollTop);
      alert('take a shot here'); 
      selenium.browserbot.getCurrentWindow().scrollBy(0,200);

    } //end while

Answer 1

Когда вы указываете элементу для прокрутки, если его scrollTop (или какое-либо другое подходящее свойство) не изменяется, вы не можете предположить, что он прокрутился настолько, насколько это возможно?

ИтакВы можете отследить старый scrollTop, попросить его прокрутить некоторые, а затем проверить, действительно ли он это сделал:

function scroller() {
    var old = someElem.scrollTop;
    someElem.scrollTop += 200;
    if (someElem.scrollTop > old) {
        // we still have some scrolling to do...
    } else {
        // we have reached rock bottom
    }
}

Answer 2

Я только что прочитал исходный код jQuery, и похоже, что вам понадобится "pageYOffset". Затем вы можете получить высоту окна и высоту документа.

Примерно так:

var yLeftToGo = document.height - (window.pageYOffset + window.innerHeight);

Если yLeftToGo равен 0, то вы внизу. По крайней мере, это общая идея.

Answer 3

Правильный способ проверить, достигли ли вы нижней части страницы, таков:

1. Get document.body.clientHeight = высота отображаемого ФАКТИЧЕСКОГО экрана
2. Получить document.body.offsetHeight или document.body.scrollHeight = высота всей отображаемой страницы
3. Проверьте, если document.body.scrollTop = document.body.scrollHeight - document.body.clientHeight

Если 3 верно, вы достигли нижней части страницы

Answer 4

function scrollHandler(theElement){
   if((theElement.scrollHeight - theElement.scrollTop) + "px" == theElement.style.height)
       alert("Bottom");
}

Для элемента HTML (например, div) добавьте событие - onscroll = 'scrollHandler (this)'.

Answer 5

Вот код, который я использовал для управления бесконечным просмотром списка прокрутки:

var isBelowBuffer = false;  // Flag to prevent actions from firing multiple times

$(window).scroll(function() {
    // Anytime user scrolls to the bottom
    if (isScrolledToBottom(30) === true) {
        if (isBelowBuffer === false) {
            // ... do something
        }
        isBelowBuffer = true;
    } else {
        isBelowBuffer = false;
    }
});

function isScrolledToBottom(buffer) {
    var pageHeight = document.body.scrollHeight;
    // NOTE:  IE and the other browsers handle scrollTop and pageYOffset differently
    var pagePosition = document.body.offsetHeight + Math.max(parseInt(document.body.scrollTop), parseInt(window.pageYOffset - 1));
    buffer = buffer || 0;
    console.log(pagePosition + "px / " + (pageHeight) + "px");
    return pagePosition >= (pageHeight - buffer);
}

Answer 6

<span id="add"></add>

<script>
    window.onscroll = scroll;

    function scroll () {
    if (window.pageYOffset + window.innerHeight >= document.body.scrollHeight - 100) {
            document.getElementById("add").innerHTML += 'test<br />test<br />test<br />test<br />test<br />';
        }
    }
</script>