解释为什么scrollTop()总是在这里返回0

Question

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

scroll事件在body元素上触发.滚动条位于body元素上,而不是html或window元素上.那么为什么document.body.scrollTop或$('body').scrollTop()返回0？

有没有办法可以用这个来检测滚动条的位置,或者如果我想使用高度,我会卡住:100%; 溢出:隐藏在html元素上？

谢谢!

Answer 1

感谢Shikkediel的评论,它似乎是一个Webkit错误.如果你将div放在body中,并将scroll事件绑定到div,它就可以了.

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

Answer 2

那是因为你有overflow-y: hidden;。删除这个然后就scrollTop()可以工作了