& # 8220; Desplazamiento sin fin & # 8221; efecto en una tabla HTML [cerrada]

Question

Estoy mostrando una tabla de datos desplazada en una página web. Esta tabla tiene varios miles de filas dinámicas, por lo que se carga desde el servidor (a través de AJAX).

El usuario puede desplazarse hacia arriba y hacia abajo, de modo que lo que necesito es detectar cuando el usuario llega al final de la barra de desplazamiento (es decir, la última fila en la parte inferior de la tabla) en orden para solicitar y mostrar más datos.

Puede encontrar este efecto en google reader, cuando se desplaza hacia abajo hasta la última publicación en un feed determinado, Google solicita y muestra las nuevas publicaciones de manera transparente, pero no puedo entender cómo lo logran.

Por cierto, ahora mismo estoy usando un YUI Datatable

Answer 1

Gracias por sus respuestas. Ese es mi código de trabajo final (inspirado por Greg y ajaxian.com ) , que utiliza algunas funciones de jQuery y funciona con YUI DataTable .

$(".yui-dt-bd").scroll(load_more);

function load_more() {              
    if ($(this).scrollend()) {
        alert("SCROLL END REACHED !");
        // TODO load more data
    }
}

$.fn.scrollend = function() {
    return this[0].scrollHeight - this[0].scrollTop - this.height() <= 0;
}

Mi siguiente paso es implementar mi propio YUI Paginator para lograr una integración completa con Componentes YUI :)

Answer 2

No estoy familiarizado con el elemento específico que está utilizando, pero en orden  para implementar esto en una ventana de tamaño completo, puede hacer lo siguiente:

$wnd.onscroll = function() {
    if (($wnd.height - $wnd.scrollTop) < SOME_MARGIN) then doSomething();
};

Donde scrollTop es esencialmente " cuántos píxeles se han desplazado " ;. Supongo que aplicar esto a la tabla con la que está trabajando hará el trabajo.

Answer 3

Acabo de buscarlo en Google y encontré este artículo: Implementando Dynamic Scroll con Ajax , JavaScript y XML . Parece una explicación minuciosa.

Answer 4

Puede verlo funcionando aquí YUI solamente. En contraste con una de las soluciones sugeridas anteriormente, la barra de desplazamiento se mueve continuamente, la posición y el tamaño reflejan el tamaño real y la posición del área visible, no carga el siguiente lote cuando la barra de desplazamiento llega al final. La barra de desplazamiento llega a la parte inferior solo cuando el último de los registros completos se encuentra en la parte inferior del área de visualización. Por supuesto, esto solo funciona si sabe cuántos registros hay.

Answer 5

Hay una propiedad que noté al leer las propiedades de DOM en Firebug hoy llamada scrollY (en Firebug, en la pestaña DOM, vaya a contenido > scrollY ) que parece ser la cantidad de píxeles que quedan para desplazarse por la ventana. Intenta ver si esto también se crea para elementos desplazables. Luego, puede usar la función de Yuval para cargar nuevos datos.

Answer 6

Ick. No es un gran fan de desplazamiento sin fin; rompe algunas de las suposiciones clave que las personas hacen acerca de cómo funciona la Web. Por favor, prometa que solo lo implementará bajo las siguientes condiciones:

1) no lo está sustituyendo por una página perfectamente buena que lo carga todo en una mesa larga y agradable y le permite al usuario usar Ctrl-F para buscar dentro de la página la hora en que Fringe se enciende.

2) no planeas insertar un anuncio en la parte inferior de cada fragmento de datos desplazados.

3) está proporcionando una alternativa de trabajo (hey, hay una buena mesa larga otra vez) para personas ciegas y personas que navegan en la Web con JavaScript desactivado.

Answer 7

Si está utilizando la YUI, tiene un tableScrollEvent que se activa cuando la tabla se desplaza. Combine esto con la función generateRequest del dataTable y podrá implementar un desplazamiento sin fin mirando el tableScrollEvent e inicie una solicitud cuando se acerque al final de su conjunto de datos.

El documento YUI no tiene un ejemplo específico para este caso, pero muestra cómo manejar los datos devueltos por generateRequest