Question

因此，当我开始滚动到div时，我的初始值为0。当我到达div的底部时，我希望我的值为100。

这是一个例子：

var initial = 0;
var end = 100;

$('div').scroll(function() {
  initial++;
  console.log(initial);
});

div {
  width: 200px;
  height: 300px;
  border: 1px solid;
  overflow-y: scroll;
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus exercitationem numquam assumenda alias blanditiis, neque labore eaque veritatis dignissimos, odio atque praesentium ut, itaque! Neque sed voluptas, similique ullam omnis.lorem Lorem
  ipsum dolor sit amet, consectetur adipisicing elit. Soluta eos quas ea quia fuga aperiam maxime amet, a odit adipisci earum autem necessitatibus. Quidem obcaecati eveniet maxime ducimus provident saepe. Lorem ipsum dolor sit amet, consectetur adipisicing
  elit. Ipsum deserunt, ipsam explicabo voluptate laborum nam odio nemo neque, libero iusto officia consequuntur dolorem quis est quod eaque? Similique, porro, et!</div>

在此示例中，如果您检查控制台，则在我滚动时，最后一个值为5，我希望它为100

感谢您的帮助！

Answer 1

您可以将initial设置为可滚动高度的百分比

var $test = $('.test');
var scrollableHeight = $test.height() - $test[0].scrollHeight; // get amount of scroll available

$test.scroll(function() {
  var $this = $(this);
 
  var initial = $this.scrollTop() / scrollableHeight * -100;  // divide the scroll top by the amount of scrollable height to get the percentage then times by -100 to make it a positive number out of 100
  
  console.log(parseInt(initial)); // parseInt is optional - just gives you integers
});

.test {
  width: 200px;
  height: 300px;
  border: 1px solid;
  overflow-y: scroll;
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus exercitationem numquam assumenda alias blanditiis, neque labore eaque veritatis dignissimos, odio atque praesentium ut, itaque! Neque sed voluptas, similique ullam omnis.lorem  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta eos quas ea quia fuga aperiam maxime amet, a odit adipisci earum autem necessitatibus. Quidem obcaecati eveniet maxime ducimus provident saepe. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum deserunt, ipsam explicabo voluptate laborum nam odio nemo neque, libero iusto officia consequuntur dolorem quis est quod eaque? Similique, porro, et!</div>

从1向下滚动到100时

1 个答案: