How to make a piece of javascript work only a given number of times?

Question

I have the following code that scrolls 85px up and down a div by pressing buttons instead of using any scrollbars.

https://jsfiddle.net/e059ruzv/

But for some reason even after you have gone to the very bottom of the div pressing the down button takes you further downwards into undefined space. Similarly when you are at the very top of the div pressing the up button takes you a further 85px higher. Its like the div has infinite height both above and below the actual content of the 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>

Any help much appreciated. Thanks in advance.

Answer 1

You have to limit it by using 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>

This also works if you add more divs.

Answer 2

Something like this should work.

1st get the inner max height(overflow) for your box container with

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

2nd check current scroll height use

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

For up, if scroll height > than the box height you can continue, otherwise you can't up anymore because it hit the bottom.

For down, if the scroll height > maxHeight you should not be able to go down anymore because you are at the top. if scroll height <= maxHeight you can go down.

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>