javascript - 滚动到 div 事件底部(溢出)

Question

嗨，请帮我拉 fiddle 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 溢出，并且我有滚动事件，当 <i id="selectedElement">s</i> 时触发在 div 中可见

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

       }
});

如果<i id="selectedElement">s</i>可见我添加了一些值'<br>a<br>a<br>a<br>a<br>a<br>a<br>a'只是为了测试我是否到达底部，但我无法使其工作。

它的功能应该是

当目标元素可见时，我将加载一些内容，然后用户将再次滚动到底部，当目标元素“再次”可见时，我将再次加载更多内容

Answer 1

我已经更新了 fiddle here .
这会在“内容”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

   }
});