javascript - 如何让一段 javascript 只工作给定的次数？

Question

我有以下代码，通过按下按钮而不是使用任何滚动条来上下滚动 85px 的 div。

https://jsfiddle.net/e059ruzv/

但出于某种原因，即使您已经到达 div 的最底部，按下向下按钮也会让您进一步向下进入未定义的空间。同样，当您位于 div 的最顶部时，按下向上按钮会使您进一步升高 85px。它就像 div 在 div 的实际内容之上和之下都有无限的高度。

var marginTop = 0;
var upHeight = 85;
var downHeight = 85;

$('.up').click(function() {

  var $elem = $('div>div:eq(0)');

  var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);

  console.log('currentOffset', currentOffset);
  var result = currentOffset - upHeight - marginTop;

  $elem.css("margin-top", result + "px");
});

$('.down').click(function() {

  var $elem = $('div>div:eq(0)');

  var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
  var result = currentOffset + downHeight + marginTop;

  console.log('.currentOffset', currentOffset)

  $elem.css("margin-top", result + "px");
})

div > div {
  transition: margin 0.05s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="up">up</button>
<button class="down">down</button>
<div style="width:125px;height:300px;overflow:hidden;margin:auto;">
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div>
</div>

非常感谢任何帮助。提前致谢。

Answer 1

这样的事情应该可行。

首先使用

获取您的盒子容器的内部最大高度(溢出)

var maxHeight = boxContainer.prop('scrollHeight') - downHeight;

第二次检查当前滚动高度使用情况

var boxContainer = $('.container');
boxContainer.prop('scrollHeight')

向上，如果scroll height > than the box height你可以继续，否则你不能再起来了，因为它触底了。

对于向下，如果 scroll height > maxHeight你不应该再往下走，因为你在上面。如果scroll height <= maxHeight你可以下去了。

var marginTop = 0;
var upHeight = 85;
var downHeight = 85;
var boxContainer = $('.container');
var maxHeight = boxContainer.prop('scrollHeight') - downHeight;

$('.up').click(function() {
  if (boxContainer.prop('scrollHeight') > boxContainer.height()) {

    var $elem = $('div>div:eq(0)');
    var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);

    console.log('currentOffset', currentOffset);
    var result = currentOffset - upHeight - marginTop;

    $elem.css("margin-top", result + "px");
  }
});

$('.down').click(function() {
  if (boxContainer.prop('scrollHeight') <= maxHeight) {

    var $elem = $('div>div:eq(0)');

    var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
    var result = currentOffset + downHeight + marginTop;

    console.log('.currentOffset', currentOffset)

    $elem.css("margin-top", result + "px");
  }
})

div>div {
  transition: margin 0.05s ease;
}

.container {
  width: 125px;
  height: 300px;
  overflow: hidden;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>
<br>
<button class="up">up</button>
<button class="down">down</button>
<div class="container">
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div>
</div>