Desplazamiento infinito de Jquery - con div no barra de desplazamiento del cuerpo

Supongamos que tengo div y quiero buscar datos y enviar datos a ese div. Cuando el usuario se desplaza dentro del div, el siguiente conjunto de datos se buscará y se insertará en el div. ¿Cómo puedo detectar la posición de la barra de desplazamiento con jQuery? No quiero usar ningún complemento. Necesito el código jQuery. Aquí está el enlace de muestra como ahttp: //www.stevefenton.co.uk/cmsfiles/assets/File/infinitescroller.html pero usó un complemento.Desplazamiento infinito de Jquery - con div no barra de desplazamiento del cuerpo

Fuente

2012-04-09 Thomas

¿Qué tal algo a lo largo de las líneas de:

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     var new_div = '<div class="new_block"></div>'; 
     $('.main_content').append(new_div.load('/path/to/script.php')); 
    } 
});

Esto añadirá un nuevo elemento en el contenedor principal página cuando la barra de desplazamiento alcanza la parte inferior de la página. También llena este nuevo elemento con contenido cargado desde un script externo.

Si desea detectar si un usuario ha desplazado hasta la parte inferior de un div específica:

$('.some_element').bind('scroll', function(){ 
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){ 
     var new_div = '<div class="new_block"></div>'; 
     $('.main_content').append(new_div.load('/path/to/script.php')); 
    } 
});

Fuente

2012-04-09 11:03:47 hohner

por qué escribir esta línea como $ (this) [0] .scrollHeight por qué no $ (this) .scrollHeight. por qué escribes aquí como array por favor mención. gracias – Thomas

@Thomas, esa es la notación de corchetes, utilizada aquí para acceder a la propiedad zeroth del objeto jQuery $ (this). Los objetos jQuery son similares a una matriz, por lo que puede confiar en que la primera propiedad sea coherente. En este caso, es una referencia al nodo DOM envuelto por el objeto jQuery. Es una taquigrafía rápida. – Bungle

@hohner - ¡Casi perfecto!;) Tengo una pequeña modificación para ese segundo bloque. Para un div con 'overflow-y: auto', la siguiente lógica funcionó para mí:' $ (this) .scrollTop() === ($ (this) [0] .scrollHeight - $ (this) .innerHeight()) '. –

creo .scrollTop() es su arma preferida. jQuery API

obtener la posición vertical actual de la barra de desplazamiento para la primera elemento en el conjunto de los elementos coincidentes.

Así que asegúrese de unirlo al elemento correcto. Directamente en el div debería funcionar, supongo.

La posición de desplazamiento vertical es igual a la cantidad de píxeles que están ocultos a la vista por encima del área desplazable. Si la barra de desplazamiento es en la parte superior, o si el elemento no es desplazable, este número sea 0.

Así que probablemente usted tiene que encontrar una manera de calcular la altura de la div como si se estiraría sin barra de desplazamiento para poner estos números en una relación significativa para disparar el evento de carga.

Fuente

2012-04-09 11:11:37 yoshi

Este código ha sido probado y verificado como correcto. Cuando desplazas tu div, el código comprueba si el desplazamiento llegó al final al comparar la altura del desplazamiento con la posición del desplazamiento. Si es así, llama a un método que obtiene más contenido y lo agrega al div.

¡Disfrútalo!

Koby

$(document).ready(function() { 
     $("div").scroll(function() { 
      var $this = $(this); 
      var height = this.scrollHeight - $this.height(); // Get the height of the div 
      var scroll = $this.scrollTop(); // Get the vertical scroll position 

      var isScrolledToEnd = (scroll >= height); 

      $(".scroll-pos").text(scroll); 
      $(".scroll-height").text(height); 

      if (isScrolledToEnd) { 
       var additionalContent = GetMoreContent(); // Get the additional content 

       $this.append(additionalContent); // Append the additional content 

      } 
     }); 
    });

por su comentario, aquí está todo el código fuente HTML de la página que está trabajando (probado en IE 9):

** Por favor asegúrese de que está haciendo referencia librería jQuery **

 <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Test Image</title> 
     <script src="assets/js/jquery.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("div").scroll(function() { 
        var $this = $(this); 
        var height = this.scrollHeight - $this.height(); // Get the height of the div 
        var scroll = $this.scrollTop(); // Get the vertical scroll position 

        var isScrolledToEnd = (scroll >= height); 

        $(".scroll-pos").text(scroll); 
        $(".scroll-height").text(height); 

        if (isScrolledToEnd) { 
         var additionalContent = GetMoreContent(); // Get the additional content 

         $this.append(additionalContent); // Append the additional content 

        } 
       }); 
      }); 

      function GetMoreContent() { 
       return "<p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p>"; 
      } 
     </script> 
    </head> 
     <body> 
      <div style="overflow: scroll;height: 150px; border: 1px solid red;"> 
       <p>This is the div content</p> 
       <p>This is the div content</p> 
       <p>This is the div content</p> 
       <p>This is the div content</p> 
       <p>This is the div content</p> 
       <p>This is the div content</p> 
      </div> 

      Scroll Height: <span class="scroll-height"></span> <br/> 
      Scroll position: <span class="scroll-pos"></span> 
     </body> 
    </html>

Fuente

2012-04-09 11:25:06

Desplazamiento infinito de Jquery - con div no barra de desplazamiento del cuerpo

Respuesta

Cuestiones relacionadas