到达底部时单击以滚动预防

Question

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

＆＃13;

＆＃13;

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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});
});

＆＃13;

＆＃13;

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});
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我认为您应该让浏览器为您执行此操作，无需跟踪scrollValue：

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

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

＆＃13;

＆＃13;

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

＆＃13;

＆＃13;

$(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});
        }
    });
})

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果在开始设置页面滚动动画之前获得文档的高度，则可以使用它来与当前滚动位置进行比较

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

这将获得您文档的总高度。如果你在一个单独的元素中设置动画，只需更改$（文档），无论你在哪个元素

要检查它何时到达底部，请执行类似的操作

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

Answer 4

在向scrollValue变量添加或减去180之前，您必须首先检查它是否已经在边缘。

这是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});
      }
});

我不是百分之百确定比较是否正确，也许你应该与$(ul).height()以外的东西进行比较，但这是正确的方法。

Answer 5

您应该验证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>