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
Respuesta
¿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'));
}
});
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.
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>
- 1. Desplazamiento infinito Jquery - barra de desplazamiento en div no cuerpo
- 2. jQuery desplazamiento infinito "reset"
- 3. Jquery, Jcarousel desplazamiento suave infinito
- 4. desplazamiento infinito disparador manual
- 5. ancho de barra de desplazamiento div
- 6. imagesLoaded método no funciona con JQuery mampostería y desplazamiento infinito
- 7. Barra de desplazamiento vertical UL o DIV
- 8. detectar si el DIV han barra de desplazamiento o no
- 9. Div barra de desplazamiento vertical mostrar
- 10. Desplazamiento horizontal infinito UIScrollView
- 11. Desactivar el desplazamiento del cuerpo pero mantener la barra de desplazamiento
- 12. Desplazamiento infinito en django
- 13. Utilización de un desplazamiento infinito/infinito
- 14. ¿Utiliza jQuery para ocultar la barra de desplazamiento div, pero conserva el desplazamiento?
- 15. Desplazamiento de la barra de desplazamiento del navegador
- 16. Desplazamiento de DIV desbordados con JavaScript
- 17. raspar sitios web con desplazamiento infinito
- 18. iPad deshabilita desplazamiento de documento pero no desbordamiento div desplazamiento
- 19. barra de desplazamiento sin elevación/altura dinámica fija con barra de desplazamiento
- 20. isótopo y Desplazamiento infinito con activación manual
- 21. Desplazamiento de desplazamiento vertical jQuery
- 22. Jquery Calendario completo Eliminar barra de desplazamiento
- 23. Desplazamiento horizontal con la rueda del mouse en un div
- 24. Desplazamiento vertical suave de la página con la rueda del mouse y la barra de desplazamiento
- 25. jquery ui selectmenu barra de desplazamiento no funciona
- 26. Barra de desplazamiento Textarea
- 27. Cómo deshabilitar el desplazamiento del cuerpo del documento?
- 28. div con desplazamiento horizontal solo
- 29. desplazamiento de posición del div con "overflow: auto"
- 30. Barra de desplazamiento del navegador de estilos
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()) '. –