如何获得可滚动的 div currentScrollY 和 totalScrollHeight答案

【问题标题】：How to get scrollable div currentScrollY and totalScrollHeight如何获得可滚动的 div currentScrollY 和 totalScrollHeight
【发布时间】：2020-07-08 15:10:45
【问题描述】：

这是我的测试代码：

<div id="scrollable" style="width:100%; height:100px; overflow: scroll">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolorum esse,
  illum nostrum placeat quia? Animi corporis explicabo modi neque porro possimus
  quos totam. Accusamus ad aliquam animi, aperiam atque beatae consectetur
  debitis deleniti dignissimos doloremque doloribus ducimus ea error est eveniet
  fugit id iste itaque mollitia nostrum officia omnis optio quam quidem saepe
  sapiente ullam voluptatibus. A ad aliquam at aut, blanditiis commodi
  consectetur consequuntur delectus dignissimos ducimus ea esse est fuga fugiat,
  fugit illo inventore ipsa iusto laboriosam libero minima minus nesciunt nulla
  officia quaerat quam quidem quo recusandae reprehenderit similique soluta
  tempora, temporibus ut vel veritatis vero voluptatem. Ab culpa dolore eveniet
  exercitationem explicabo incidunt itaque laudantium molestiae nisi nobis
  nostrum, numquam possimus quam, quas quis, quisquam recusandae sed voluptatem.
  Deleniti esse iure nisi odio ullam. Autem ducimus eius enim inventore placeat
  possimus repudiandae voluptates? A adipisci cumque doloribus eligendi, eos
  eveniet harum laborum minus nam optio quae sed voluptas voluptates.
  Accusantium architecto, at dolor dolore eligendi incidunt ipsa, ipsum iure
  mollitia, nam nesciunt quo repellendus reprehenderit rerum sapiente similique
  voluptas. Eos laborum optio quibusdam voluptatum. Deserunt dolor doloribus
  enim minus praesentium reiciendis soluta tenetur. Ad consectetur consequuntur
  cumque iure molestias nam perferendis placeat quibusdam soluta, voluptatum!
</div>
<script
  type="text/javascript"
  src="../node_modules/jquery/dist/jquery.js"
></script>
<script>
  var scrollable = document.querySelector("#scrollable");
  $(scrollable).on("scroll", ev => {
    console.log(`container scroll top:${$(scrollable).scrollTop()}`);
    console.log(`container scroll height:${$(scrollable).height()}`);
  });
</script>

我很困惑，当我滚动到可滚动的 div 底部时，滚动顶部！= 滚动高度

【问题讨论】：

标签： javascript html css frontend

【解决方案1】：

这应该是正确的。
container scroll height 是窗口的高度。
container scroll top 是您滚动内容顶部的距离。

因此，如果我在浏览器中加载您的内容，并且container scroll height = 100，并且我将窗口缩小，那么我的container scroll height 仍然是 100，我没有更改窗口的高度。但是现在您可以进一步向下滚动，因此您的container scroll top 可能会随着您向下滚动而改变。

【讨论】：