javascript - 向下滚动时从 1 增加到 100

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

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

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>