javascript - 查找滚动底部问题

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 滚动到底部时获取此日志:

滚动 Pane 高度 + 滚动 Pane scrollTop = 740.9090881347656

内容高度 = 709.091

我做错了什么？

Answer 1

经过一些 JSfiddle 后，我根据原始答案进行了编辑:

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高度而变化。你必须弄清楚它的值(value)。

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

所以你必须检查你的scrollTop是否采用diff值。