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

【问题标题】：Explain why scrollTop() always returns 0 here解释为什么 scrollTop() 在这里总是返回 0
【发布时间】：2020-01-02 18:10:26
【问题描述】：

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

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

有什么方法可以检测滚动条的位置，或者如果我想使用 height: 100%; 会卡住吗？溢出：隐藏在 html 元素上？

谢谢！

【问题讨论】：

我认为这是一个 webkit 错误。适用于火狐。 code.google.com/p/chromium/issues/detail?id=423935
谢谢！我将body设置为overflow-y hidden并添加了一个高度为100和overflow-y auto的包装div，并且滚动事件/ scrollTop在div上起作用。

标签： jquery css scroll

【解决方案1】：

感谢 Shikkediel 的评论，这似乎是一个 Webkit 错误。如果您将 div 立即放在 body 中，并将滚动事件绑定到 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());
  }
});

【讨论】：

【解决方案2】：

因为你有overflow-y: hidden;。删除它，然后scrollTop() 将起作用

【讨论】：