La misma pregunta se contesta en jQUery, pero estoy buscando una solución sin jQuery.
¿Cómo sabes que la barra de desplazamiento ha llegado a la parte inferior de una página

Me gustaría saber ¿cómo puedo determinar si la barra de desplazamiento vertical se ha llegado a la parte inferior de la página web.

Estoy usando Firefox3.6

Escribí Javascript simple bucle para desplazarse hacia abajo por 200 píxeles y cuando la barra de desplazamiento llegado a la parte inferior de la página, quiero detener el bucle.

El problema es scrollHeight() devuelve 1989.

Y dentro de bucle scrollTop se incrementa en un 200 por iteración.

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

Y a partir de 1715, no de incremento, por lo que este bucle continúa para siempre.

Parece scrollHeight() y scrollTop() no es la forma correcta de comparar para determinar la posición actual de la barra de desplazamiento? ¿Cómo puedo saber cuando el bucle debe detenerse?

código:

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
  • Me doy cuenta de que la mayoría de las soluciones son de jQuery, pero usted todavía puede ser capaz de obtener ayuda de ellos si usted está buscando una «infinita» de desplazamiento efecto: google.com/search?q=infinite+scroll Deseo suerte.
InformationsquelleAutor masato-san | 2011-05-27

6 Comentarios

  1. 9

    Cuando usted le dice a un elemento de desplazamiento, si su scrollTop (o lo que sea adecuada a la propiedad) no cambia, no puedes asumir que se ha desplazado hasta donde es capaz?

    Así que usted puede guardar la pista de la antigua scrollTop, decirle que algunos de desplazamiento y, a continuación, comprobar para ver si realmente lo hizo:

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

    Acabo de leer a través de jQuery código fuente, y parece que tendrá el «pageYOffset». A continuación, puede obtener la altura de la ventana de documento y de altura.

    Algo como esto:

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

    Si yLeftToGo es 0, entonces usted está en la parte inferior. Al menos esa es la idea general.

    • Tenga en cuenta que esto no funciona tan bien para IE. Creo que en IE se puede hacer el documento.cuerpo.scrollTop o algo. de la ventana.pageYOffset funciona en IE9 si usted no se preocupan por los navegadores antiguos.
    • Sí, me imaginé que dependiendo del navegador, que se diferencia en el nombre de la propiedad.
    • Pero al parecer es decir no es tan precisa como navegadores reales. =D
  3. 4
    function scrollHandler(theElement){
       if((theElement.scrollHeight - theElement.scrollTop) + "px" == theElement.style.height)
           alert("Bottom");
    }

    Para el elemento HTML (como div) añadir el evento — onscroll=’scrollHandler(este)’.

  4. 4

    De la manera correcta, para comprobar si se alcanza la parte inferior de la página es esta:

    1. Obtener document.body.clientHeight = es la altura REAL de la pantalla que se muestra
    2. Obtener document.body.offsetHeight o documento.cuerpo.scrollHeight = la altura de toda la página que se muestra
    3. Comprobar si document.body.scrollTop = document.body.scrollHeight - document.body.clientHeight

    Si 3 es cierto, has llegado a la parte inferior de la página

    • window.innerHeight en lugar de document.body.clientHeight
  5. 1

    Aquí está el código que he utilizado para poder infinito de desplazamiento de las vistas de lista:

    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. 0
    <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>

Dejar respuesta

Please enter your comment!
Please enter your name here