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());
  }
});