Question

嗨，请帮助我摆弄我的小提琴HERE

我有这个div

<div id='divdiv' style="height: 200px; overflow:scroll">
<span id='content'> 
  Scroll down!Scroll down!
  Scroll down!Scroll down!
  Scroll down!Scroll down!
  Scroll down!Scroll down!
  Scroll down!Scroll down!
  Scroll down!Scroll down!
</span>
    <i id="selectedElement">s</i>

</div>

这个div有溢出，我有滚动事件，当div {/ 1>中s可见时触发

 //function to check if target element is visible
    function isElementVisible(elementToBeChecked)
    {
        var TopView = $('#divdiv').scrollTop();
        var BotView = TopView + $('#divdiv').height();
        var TopElement = $(elementToBeChecked).offset().top;
        var BotElement = TopElement + $(elementToBeChecked).height();
        return ((BotElement <= BotView) && (TopElement >= TopView));
    }


//scroll event
$('#divdiv').scroll(function () {
       isOnView = isElementVisible("#selectedElement");
       if(isOnView){
           $('#content').append('<br>a<br>a<br>a<br>a<br>a<br>a<br>a');

       }else{ // If not visible

       }
});

如果s可见，我添加了一些值' a a a a a a a'，只是为了测试我是否到达底部，但我无法使其正常工作。

它应该起到

的作用

当目标元素可见时，我将加载一些内容，然后用户将再次滚动到底部，当目标元素再次出现时＃34;可见我会再次加载更多内容

Answer 1

我更新了小提琴here 这会在内容中附加一个随机数字＆＃39; div一到达底部。

function appendContent()
{
    if ($('#divdiv')[0].scrollHeight <= $('#divdiv')[0].scrollTop + $('#divdiv').height() ) {
        return true;
    }
    else
        return false;
}

$('#divdiv').scroll(function () {
   if(appendContent()){
       $('#content').append('<br>' + Math.random());
   }else{ // If not visible

   }
});

Answer 2

选中 Demo Fiddle

使用此

 $('#divdiv').scrollTop($('#divdiv').prop("scrollHeight"));

OR

$('#divdiv').scrollTop($('#divdiv')[0].scrollHeight);

scrollTop() 将div滚动到底部。

prop("scrollHeight") 为您提供实际高度，而非默认显示高度 - height()。

滚动到div事件的底部（溢出）

2 个答案: