找到滚动底部问题

问题描述 投票:2回答:2

我一直在尝试使用以下代码检测滚动位于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滚动到底部时获取此日志:

scrollpane height + scrollpane scrollTop = 740.9090881347656

内容高度= 709.091

我究竟做错了什么 ?

javascript jquery scroll
2个回答
0
投票

我在一些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值。


0
投票
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');
    }

});
© www.soinside.com 2019 - 2024. All rights reserved.