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

Question

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

javascriptjquery

3

我看到了许多类似的问题，但它们似乎都不能解决我的问题，因为它们似乎都依赖于页面滚动。

然而，这并非如此。页面从未滚动过。我尝试了很多解决方案，现在已经彻底困惑了。

我有一个绝对定位的 DIV 元素（父元素），其中滚动被禁用。我在其中放置了一个绝对定位的子元素，该子元素启用了滚动，并且有足够的内容以确保滚动发生。

我需要将该子元素的 scrollTop() 作为百分比获取。

我尝试了许多类似以下的方法：

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

但我实在想不出如何使这在我的情况下起作用。文档高度似乎与我正在处理的元素无关。看起来

child.height() / child.scrollTop()

应该可以工作，但实际上并没有。

任何帮助都将不胜感激。

- MaxVK

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zenoo · Accepted Answer

你可以使用 (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>