Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

scrollpane height + scrollpane 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');
    }

});

找到滚动底部问题

2 个答案: