javascript - 到达底部时单击以防止滚动

Question

要重现我的问题，请点击 down 按钮 4 次，然后点击 up 按钮。您会注意到您必须再单击一次才能使底部向上工作。如何检测它到达底部并返回错误？

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>

Answer 1

所以，就像我在评论中所说的那样。您需要容器高度(使用 scrollHeight)，如果滚动更远，它需要等于高度。当它试图低于 0 时也是如此。它必须重置为 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>

我认为你应该让浏览器为你做这件事，不需要跟踪 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>