jquery - funcion - Explica por qué scrollTop() siempre devuelve 0 aquí

scrolltop javascript mobile

Question

Ver http://codepen.io/anon/pen/NGqPNz

CSS:

html {
height: 100%;
overflow-y: hidden;
}
body {
height: 100%;
overflow-y: auto;
}

JS:

 $(''body'').bind("scroll", function () {
if ($(''body'').scrollTop()) {
console.log(''triggered!'');
} else {
console.log($(''body'').scrollTop());
}
});

El evento de desplazamiento dispara al elemento del cuerpo. La barra de desplazamiento está en el elemento del cuerpo, no en el elemento html o window. Entonces, ¿por qué document.body.scrollTop o $ (''body''). ScrollTop () devuelve 0?

¿Hay alguna manera de que pueda detectar la posición de la barra de desplazamiento con esto o estoy atascado si quiero usar la altura: 100%; desbordamiento: oculto en el elemento html?

¡Gracias!

Answer 1

Es porque tienes overflow-y: hidden; . Quite esto y luego scrollTop() funcionará

Answer 2

Gracias al comentario de Shikkediel, parece ser un error de Webkit. Si coloca un div inmediatamente dentro del cuerpo y vincula el evento de desplazamiento al div, funciona.

http://codepen.io/anon/pen/bVderq

CSS:

html {
height: 100%;
overflow-y: hidden;
}
body {
height: 100%;
overflow-y: hidden;
}
.scroll-wrapper {
height: 100%;
overflow-y: auto;
}

JS:

$(''.scroll-wrapper'').bind("scroll", function () {
if ($(''.scroll-wrapper'').scrollTop()) {
console.log(''triggered!'');
console.log($(''.scroll-wrapper'').scrollTop());
} else {
console.log($(''.scroll-wrapper'').scrollTop());
}
});