validacion - validar formulario javascript onclick

Compruebe si un usuario se ha desplazado a la parte inferior

Question

Estoy creando un sistema de paginación (parecido a Facebook) donde el contenido se carga cuando el usuario se desplaza hacia abajo. Me imagino que la mejor manera de hacerlo es encontrar cuando el usuario se encuentra en la parte inferior de la página y ejecutar una consulta ajax para cargar más publicaciones.

El único problema es que no sé cómo comprobar si el usuario se ha desplazado a la parte inferior de la página con jQuery. ¿Algunas ideas?

Necesito encontrar una manera de verificar cuándo el usuario se ha desplazado a la parte inferior de la página con jQuery.

Answer 1

Además de la excelente respuesta aceptada de Nick Craver, puede acelerar el evento scroll para que no se active con tanta frecuencia, lo que aumenta el rendimiento del navegador :

var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);
$document.ready(function () {
$window
.off(''scroll'', ScrollHandler)
.on(''scroll'', ScrollHandler);
});
function ScrollHandler(e) {
//throttle event:
clearTimeout(_throttleTimer);
_throttleTimer = setTimeout(function () {
console.log(''scroll'');
//do work
if ($window.scrollTop() + $window.height() > $document.height() - 100) {
alert("near bottom!");
}
}, _throttleDelay);
}

Answer 2

Aquí hay un enfoque bastante simple:

elm.onscroll = function() {
if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) //User has scrolled to the bottom of the element
}

Answer 3

Aquí hay un fragmento de código que lo ayudará a depurar su código. Probé las respuestas anteriores y encontré que tienen errores. He probado los siguientes en Chrome, IE, Firefox, IPad (Safari). No tengo ningún otro instalado para probar ...

<script type="text/javascript">
$(function() {
$(window).scroll(function () {
var docElement = $(document)[0].documentElement;
var winElement = $(window)[0];
if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
alert(''bottom'');
}
});
});
</script>

Puede haber una solución más simple, pero me detuve en el punto en el que funcionó

Si aún tiene problemas con algún navegador malicioso, aquí hay un código para ayudarlo a depurar:

<script type="text/javascript">
$(function() {
$(window).scroll(function () {
var docElement = $(document)[0].documentElement;
var details = "";
details += ''<b>Document</b><br />'';
details += ''clientHeight:'' + docElement.clientHeight + ''<br />'';
details += ''clientTop:'' + docElement.clientTop + ''<br />'';
details += ''offsetHeight:'' + docElement.offsetHeight + ''<br />'';
details += ''offsetParent:'' + (docElement.offsetParent == null) + ''<br />'';
details += ''scrollHeight:'' + docElement.scrollHeight + ''<br />'';
details += ''scrollTop:'' + docElement.scrollTop + ''<br />'';
var winElement = $(window)[0];
details += ''<b>Window</b><br />'';
details += ''innerHeight:'' + winElement.innerHeight + ''<br />'';
details += ''outerHeight:'' + winElement.outerHeight + ''<br />'';
details += ''pageYOffset:'' + winElement.pageYOffset + ''<br />'';
details += ''screenTop:'' + winElement.screenTop + ''<br />'';
details += ''screenY:'' + winElement.screenY + ''<br />'';
details += ''scrollY:'' + winElement.scrollY + ''<br />'';
details += ''<b>End of page</b><br />'';
details += ''Test:'' + (docElement.scrollHeight - winElement.innerHeight) + ''='' + winElement.pageYOffset + ''<br />'';
details += ''End of Page? '';
if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
details += ''YES'';
} else {
details += ''NO'';
}
$(''#test'').html(details);
});
});
</script>
<div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;">

Espero que esto le salve a alguien algún tiempo.

Answer 4

Déjame mostrar approch sin JQuery. Función JS simple:

function isVisible(elem) {
var coords = elem.getBoundingClientRect();
var topVisible = coords.top > 0 && coords.top < 0;
var bottomVisible = coords.bottom < shift && coords.bottom > 0;
return topVisible || bottomVisible;
}

Breve ejemplo de cómo usarlo:

var img = document.getElementById("pic1");
if (isVisible(img)) { img.style.opacity = "1.00"; }

Answer 5

Detener la alerta repetida de la respuesta de Nick.

ScrollActivate();
function ScrollActivate() {
$(window).on("scroll", function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(window).off("scroll");
alert("near bottom!");
}
});
}

Answer 6

Estos son mis dos centavos:

$(''#container_element'').scroll( function(){
console.log($(this).scrollTop()+'' + ''+ $(this).height()+'' = ''+ ($(this).scrollTop() + $(this).height()) +'' _ ''+ $(this)[0].scrollHeight );
if($(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight){
console.log(''bottom found'');
}
});

Answer 7

Intente esto para la condición de coincidencia si se desplaza hacia el extremo inferior

if ($(this)[0].scrollHeight - $(this).scrollTop() ==
$(this).outerHeight()) {
//code for your custom logic
}

Answer 8

La respuesta de Nick Craver debe modificarse ligeramente para funcionar en iOS 6 Safari Mobile y debe ser:

$(window).scroll(function() {
if($(window).scrollTop() + window.innerHeight == $(document).height()) {
alert("bottom!");
}
});

Se debe cambiar $ (window) .height () por window.innerHeight porque cuando la barra de direcciones está oculta, se agregan 60px adicionales a la altura de la ventana, pero usar $(window).height() no refleja este cambio, mientras se usa window.innerHeight hace.

Nota : la propiedad window.innerHeight también incluye la altura de la barra de desplazamiento horizontal (si está renderizada), a diferencia de $(window).height() que no incluirá la altura de la barra de desplazamiento horizontal. Esto no es un problema en Mobile Safari, pero podría causar un comportamiento inesperado en otros navegadores o versiones futuras de Mobile Safari. Cambiar == a >= podría solucionar este problema en los casos de uso más comunes.

Lea más sobre la propiedad window.innerHeight here

Answer 9

La respuesta de Nick Craver funciona bien, evite el problema de que el valor de $(document).height() varía según el navegador.

Para que funcione en todos los navegadores, use esta función de James Padolsey :

function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}

en lugar de $(document).height() , de modo que el código final sea:

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == getDocHeight()) {
alert("bottom!");
}
});

Answer 10

Mi solución en llano js:

let el=document.getElementById(''el'');
el.addEventListener(''scroll'', function (e) {
if (el.scrollHeight - el.scrollTop - el.clientHeight<0) {
console.log(''Bottom'')
}
});

#el{
width:300px;
height:100px;
overflow-y:scroll;
}

<div id="el">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>

Answer 11

Nick responde que está bien, pero tendrá funciones que se repiten mientras se desplaza o no funcionarán si el usuario tiene la ventana ampliada. Se me ocurrió una solución fácil, solo matemáticas. Alrededor de la primera altura y funciona como se supone.

 if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
loadPagination();
$(".go-up").css("display","block").show("slow");
}

Answer 12

No estoy exactamente seguro de por qué no se ha publicado todavía, pero según la documentación de MDN , la forma más sencilla es mediante el uso de propiedades de JavaScript nativas:

element.scrollHeight - element.scrollTop === element.clientHeight

Devuelve verdadero cuando estás en la parte inferior de cualquier elemento desplazable. Así que simplemente usando javascript:

element.addEventListener(''scroll'', function(event)
{
var element = event.target;
if (element.scrollHeight - element.scrollTop === element.clientHeight)
{
console.log(''scrolled'');
}
});

scrollHeight tiene un amplio soporte en los navegadores, desde ie 8 para ser más precisos, mientras que clientHeight y scrollTop son compatibles con todos. Incluso es decir 6. Esto debe ser seguro para todos los navegadores.

Answer 13

Para aquellos que utilizan la solución de Nick y obtienen repetidas alertas / eventos, puede agregar una línea de código sobre el ejemplo de alerta:

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(window).unbind(''scroll'');
alert("near bottom!");
}
});

Esto significa que el código solo se activará la primera vez que esté dentro de 100 px de la parte inferior del documento. No se repetirá si te desplazas hacia atrás y luego hacia abajo, lo que puede o no ser útil dependiendo de para qué estás usando el código de Nick.

Answer 14

Por favor verifica esta respuesta

 window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
console.log("bottom");
}
};

Puede hacer footerHeight - document.body.offsetHeight para ver si está cerca del pie de página o si ha llegado al pie de página

Answer 15

Puedes probar el siguiente código,

$("#dashboard-scroll").scroll(function(){
var ele = document.getElementById(''dashboard-scroll'');
if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){
console.log(''at the bottom of the scroll'');
}
});

Answer 16

Todas estas soluciones no funcionan para mí en Firefox y Chrome, por lo que uso funciones personalizadas de Miles O''Keefe y meder omuraliev de esta manera:

function getDocHeight()
{
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
function getWindowSize()
{
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == ''number'' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in ''standards compliant mode''
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return [myWidth, myHeight];
}
$(window).scroll(function()
{
if($(window).scrollTop() + getWindowSize()[1] == getDocHeight())
{
alert("bottom!");
}
});

Answer 17

Utilicé la respuesta de @ddanone y agregué la llamada Ajax.

$(''#mydiv'').on(''scroll'', function(){
function infiniScroll(this);
});
function infiniScroll(mydiv){
console.log($(mydiv).scrollTop()+'' + ''+ $(mydiv).height()+'' = ''+ ($(mydiv).scrollTop() + $(mydiv).height()) +'' _ ''+ $(mydiv)[0].scrollHeight );
if($(mydiv).scrollTop() + $(mydiv).height() == $(mydiv)[0].scrollHeight){
console.log(''bottom found'');
if(!$.active){ //if there is no ajax call active ( last ajax call waiting for results ) do again my ajax call
myAjaxCall();
}
}

}

Answer 18

Pure JS con navegador cruzado y debouncing ( rendimiento bastante bueno)

var CheckIfScrollBottom = debouncer(function() {
if(getDocHeight() == getScrollXY()[1] + window.innerHeight) {
console.log(''Bottom!'');
}
},500);
document.addEventListener(''scroll'',CheckIfScrollBottom);
function debouncer(a,b,c){var d;return function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f)}}
function getScrollXY(){var a=0,b=0;return"number"==typeof window.pageYOffset?(b=window.pageYOffset,a=window.pageXOffset):document.body&&(document.body.scrollLeft||document.body.scrollTop)?(b=document.body.scrollTop,a=document.body.scrollLeft):document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)&&(b=document.documentElement.scrollTop,a=document.documentElement.scrollLeft),[a,b]}
function getDocHeight(){var a=document;return Math.max(a.body.scrollHeight,a.documentElement.scrollHeight,a.body.offsetHeight,a.documentElement.offsetHeight,a.body.clientHeight,a.documentElement.clientHeight)}

Demostración: http://jsbin.com/geherovena/edit?js,output

PD: getScrollXY , getDocHeight , getDocHeight no escrito por mí

Solo muestro cómo funciona, y cómo lo haré.

Answer 19

Use el evento .scroll() en la window , así:

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});

Puede probarlo aquí , esto toma el desplazamiento superior de la ventana, así que cuánto se desplaza hacia abajo, agrega la altura de la ventana visible y comprueba si es igual a la altura del contenido general ( document ). Si en cambio quisiera verificar si el usuario está cerca de la parte inferior, se vería así:

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("near bottom!");
}
});

Puede probar esa versión aquí , simplemente ajuste esos 100 a cualquier píxel desde la parte inferior que desea activar.

Answer 20

var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

Calcula la barra de desplazamiento de la distancia hasta la parte inferior del elemento. Igual 0, si la barra de desplazamiento ha llegado a la parte inferior.