查找滚动底部问题

Question

我一直在尝试使用以下代码检测滚动是否位于div的底部：

  $('.scrollpane').scroll(function(){ if ($(this).scrollTop() + $(this).height() === $("#results").height()) { alert('scroll at bottom'); } }); 

 .scrollpane { height: 400px; overflow: auto; width: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="scrollpane"> <ul id="results"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li> <li>item11</li> <li>item12</li> ... <li>item39</li> </ul> </div> 

但是在div滚动到底部时获取此日志：

滚动窗格高度+滚动窗格scrollTop = 740.9090881347656

内容高度= 709.091

我究竟做错了什么 ？

Answer 1

经过一些JSfiddling之后，我根据原始答案进行了编辑：

的jsfiddle

  var resultHeight = $('#results').innerHeight();
  var scrollPaneHeight = $('.scrollpane').innerHeight();
  var marginBottom =parseInt($('#results').css('marginBottom').replace('px', ''));
  var marginTop =parseInt($('#results').css('marginTop').replace('px', ''));
  var diff = (resultHeight-scrollPaneHeight)+marginBottom+marginTop;

  $('.scrollpane').scroll(function(){
     if ($(this).scrollTop() == diff) {
        alert('scroll at bottom');
     }

  });

说明：

当溢出时，scrollPane的scrollTop（）会根据您的div高度而变化。 您必须弄清楚它的价值。

这个值等于diff变量（技巧是处理边距，也许有一种最简单的方法来做到这一点，但我现在已经完成了）。

因此，您必须检查您的scrollTop是否采用diff值。

Answer 2

let resultHeight = $('#results').innerHeight();
let scrollPaneHeight = $('.scrollpane').innerHeight();
let marginBottom =parseInt($('#results').css('marginBottom'));
let marginTop =parseInt($('#results').css('marginTop'));
let diff = Math.floor((resultHeight-scrollPaneHeight)+marginBottom+marginTop);

$('.scrollpane').scroll(function()
{
    let scrollTop = Math.ceil($(this).scrollTop());

    if (scrollTop == diff || scrollTop == diff + 1)
    {
        alert('scroll at bottom');
    }

});