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>

获取scrollTop（）作为元素高度的百分比

1 个答案: