Javascript 滚动至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>

向下滚动！向下滚动！
向下滚动！向下滚动！
向下滚动！向下滚动！
向下滚动！向下滚动！
向下滚动！向下滚动！
向下滚动！向下滚动！
s

这个div有溢出，我有滚动事件，当在div中看到

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

       }
});

//用于检查目标元素是否可见的函数
函数isElementVisible（elementToBeChecked）
{
var TopView=$（'#divdiv'）.scrollTop（）；
var BotView=TopView+$（'#divdiv'）.height（）；
var TopElement=$（elementToBeChecked）.offset（）.top；
var BotElement=TopElement+$（elementToBeChecked）.height（）；
返回（（BotElement=TopView））；
}
//滚动事件
$（'#divdiv'）。滚动（函数（）{
isOnView=isElementVisible（#selectedElement”）；
如果（isOnView）{
$（'#content'）。追加（'
a
a
a
a
a
a
a
a'）；
}else{//如果不可见
}
});

如果

s

可见，我添加了一些值

'
a
a
a
a
a
a
a
a
a'

，只是为了测试我是否到达底部，但我无法使其工作

它的功能应该是

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

用这个

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

或

将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

   }
});

给出实际高度，而不是默认显示高度-

高度（）

我已经更新了小提琴。
这会在“content”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

   }
});

函数appendContent（）
{
如果（$（'#divdiv'）[0].scrollHeight它到底应该做什么？@ICanHasKittenz当目标元素可见时，我将加载一些内容，然后用户将再次滚动到底部，当目标元素“再次”时可见，我将再次加载一些内容div大小刚好足以包含您打印的内容。@Hariprasad问题是，内容是服务器的响应，如果我加载10000条记录作为对一个请求的一个响应，那么加载速度会很慢，很重。很好的进展，谢谢，但是当我向上滚动另一个内容时加载了什么内容已加载？我找不到任何内容。此

a
a
a
a
a
a
a
的行为与已加载的内容类似。谢谢，根据您的代码，只有当
是可见的（#selectedElement”）
时，滚动功能才会工作。这就是如果
不可见，则无法滚动到底部的原因。