javascript - 获取 scrollTop() 作为元素高度的百分比

Question

我已经看到很多这样的问题，但似乎没有一个适合我的情况，因为它们似乎都依赖于正在滚动的页面。

事实并非如此。该页面从不滚动。我已经尝试了很多解决方案，但现在我完全糊涂了。

我有一个绝对定位的 DIV 元素(父元素)，它禁用了滚动。我在其中有一个绝对定位的子元素，该元素启用了滚动功能，并且包含大量内容以确保发生滚动。

我需要以百分比形式获取该子元素的 scrollTop()。

我已经按照这些思路尝试了很多事情:

var sPcent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());

但我终其一生都无法弄清楚如何在我的案例中完成这项工作。文档高度似乎与我正在使用的元素无关。好像是

child.height() / child.scrollTop()

应该可以，但没有。

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用 (elem[0].scrollHeight - elem.outerHeight()) 获取元素的最大可滚动高度。

将其除以 100 并使用结果除以元素的 scrollTop()。

var sPcent = $('#child').scrollTop() / (($('#child')[0].scrollHeight - $('#child').outerHeight()) / 100);

var sPcent = 0;


$('#child').on('scroll',function(){
  sPcent = $('#child').scrollTop() / (($('#child')[0].scrollHeight - $('#child').outerHeight()) / 100);
  console.log(sPcent);
});

#parent{
  position: absolute;
  height: 200px;
  width: 100%;
  top: 50px;
  left: 0;
  background-color: black;
}

#child{
  position: absolute;
  width: 50px;
  height: 50px;
  left: 0;
  top: 0;
  background-color: grey;
  overflow-y: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
  </div>
</div>