All geek questions in one place

Click to scroll alert when bottom reached

To reproduce my problem, press the button down4 times, and then press the button up. You will notice that you need to click again to make the bottom work. How to detect it by reaching the bottom and return false?

var scrollValue = 0;
$('#down').click(function(){
      scrollValue = scrollValue + 180;
    $('ul').animate({scrollTop:scrollValue});
});

$('#up').click(function(){
      scrollValue = scrollValue + -180;
    $('ul').animate({scrollTop:scrollValue});
});
ul {
  padding: 0;
  margin: 0;
  height: 180px;
  overflow: auto;
}
li {
  height: 50px;
  background: pink;
  list-style: none;
  margin-bottom: 10px;
  height: 50px;
}
body {
  padding: 0;
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>
<button id="up">up</button>
<button id="down">down</button>
Run codeHide result
+4
source share
5 answers

So, as I said in my comment. You need the height of the container (s scrollHeight), and if the scroll goes further, it should be equal to the height. Same thing when it tries to go below 0. It should reset to 0.

var scrollValue = 0;
var nHeight = $('ul').height();
var height = $('ul').prop('scrollHeight');
height = height - nHeight;
$('#down').click(function(){
      var nScrollValue = scrollValue + 180;
      if(nScrollValue < height){
         scrollValue = nScrollValue;
      } else {
         scrollValue = height;
      }
      $('ul').animate({scrollTop:scrollValue});
});

$('#up').click(function(){
      var nScrollValue = scrollValue - 180;
      if(nScrollValue > 0){
        scrollValue = nScrollValue;
      } else {
        scrollValue = 0;
      }
      $('ul').animate({scrollTop:scrollValue});
});


var scrollValue = 0;
var nHeight = $('ul').height();
var height = $('ul').prop('scrollHeight');
height = height - nHeight;
$('#down').click(function(){
      var nScrollValue = scrollValue + 180;
      if(nScrollValue < height){
         scrollValue = nScrollValue;
      } else {
         scrollValue = height;
      }
      $('ul').animate({scrollTop:scrollValue});
});

$('#up').click(function(){
      var nScrollValue = scrollValue - 180;
      if(nScrollValue > 0){
        scrollValue = nScrollValue;
      } else {
        scrollValue = 0;
      }
      $('ul').animate({scrollTop:scrollValue});
});
ul {
  padding: 0;
  margin: 0;
  height: 180px;
  overflow: auto;
}
li {
  height: 50px;
  background: pink;
  list-style: none;
  margin-bottom: 10px;
  height: 50px;
}
body {
  padding: 0;
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>
<button id="up">up</button>
<button id="down">down</button>
Run codeHide result

I think you should let the browser do this for you, no need to track on scrollValue:

$('#down').click(function(){
      $('ul').animate({scrollTop: '+=180'});
});

$('#up').click(function(){
      $('ul').animate({scrollTop: '-=180'})
});


$('#down').click(function(){
      $('ul').animate({scrollTop: '+=180'});
});

$('#up').click(function(){
      $('ul').animate({scrollTop: '-=180'})
});
ul {
  padding: 0;
  margin: 0;
  height: 180px;
  overflow: auto;
}
li {
  height: 50px;
  background: pink;
  list-style: none;
  margin-bottom: 10px;
  height: 50px;
}
body {
  padding: 0;
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>
<button id="up">up</button>
<button id="down">down</button>
Run codeHide result
+3

:

$(document).ready(function() {
    var scrollValue = 0;
    nbCase = ($("li").length/3)-1; // 3 is number of visible row
    $('#down').click(function(){
        if(scrollValue <= (nbCase*180)  ){
            scrollValue = scrollValue + 180;
            console.log(scrollValue)
            $('ul').animate({scrollTop:scrollValue});
        }
    });

    $('#up').click(function(){
        if(scrollValue >= (180)  ){
            scrollValue = scrollValue + -180;
            $('ul').animate({scrollTop:scrollValue});
        }
    });
})
ul {
  padding: 0;
  margin: 0;
  height: 180px;
  overflow: auto;
}
li {
  height: 50px;
  background: pink;
  list-style: none;
  margin-bottom: 10px;
  height: 50px;
}
body {
  padding: 0;
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>
<button id="up">up</button>
<button id="down">down</button>
Hide result
+2

,

var documentHeight = $(document).height();

. , $() ,

, , -

if(scrollValue + 180 > documentHeight) {
    // At the bottom
}
+1

180 scrollValue , .

JS:

var scrollValue = 0;
$('#down').click(function(){
      if (scrollValue < $(ul).height() ) {
          scrollValue = scrollValue + 180;
          $('ul').animate({scrollTop:scrollValue});
      }
});

$('#up').click(function(){
      if (scrollValue > 0) {
          scrollValue = scrollValue + -180;
          $('ul').animate({scrollTop:scrollValue});
      }
});

100%, , , - , $(ul).height(), .

0

, scrollValue 0. .

var scrollValue = 0;
$('#down').click(function(){
      if(scrollValue >= 0){
         scrollValue = scrollValue + 180;
      }
    $('ul').animate({scrollTop:scrollValue});
});

$('#up').click(function(){
    scrollValue = scrollValue + -180;
    $('ul').animate({scrollTop:scrollValue});
});
ul {
  padding: 0;
  margin: 0;
  height: 180px;
  overflow: auto;
}
li {
  height: 50px;
  background: pink;
  list-style: none;
  margin-bottom: 10px;
  height: 50px;
}
body {
  padding: 0;
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>
<button id="up">up</button>
<button id="down">down</button>
Hide result
-1
source

Source: https://habr.com/ru/post/1611789/

More articles:


All Articles