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

Тот же вопрос отвечает в 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

Ответ 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
    }
}

Ответ 2

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

Что-то вроде этого:

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

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

Ответ 3

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

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

Ответ 4

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

Получить document.body.clientHeight= высоту отображаемого экрана ACTUAL
Получить document.body.offsetHeight или document.body.scrollHeight = высота всей отображаемой страницы
Убедитесь, что document.body.scrollTop= document.body.scrollHeight - document.body.clientHeight

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

Ответ 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);
}

Ответ 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>