如何让一段javascript只运行一次？

时间：2017-05-15 17:30:19

标签： javascript jquery html css scroll

我有以下代码，通过按下按钮而不是使用任何滚动条来向上和向下滚动一个div。

https://jsfiddle.net/e059ruzv/

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

＆＃13;
＆＃13; 
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");
})
＆＃13; 
div > div {
  transition: margin 0.05s ease;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

您必须使用if：

来限制它 

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

var $elems = $('div>div');

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

	  var test = (($elems.size() -2) * upHeight-10) * -1;      
       
      if (currentOffset >= test) {
      
        //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);
    if (currentOffset <= 0) {
       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>
<br>
<br>
<br>
<br>
<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>

如果您添加更多div，这也有效。

相关问题
最新问题