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

Question

Hi please help me with my fiddle HERE

I have this 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>

this div has overflow and I have scroll event that trigger when <i id="selectedElement">s</i> is visible in 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

       }
});

if the <i id="selectedElement">s</i> is visible i added some value '<br>a<br>a<br>a<br>a<br>a<br>a<br>a' just to test if i reach the bottom but I can't make it work.

it should function as

when the target element is visible i will load some content then user will scroll again to bottom and when the target element is "again" visible i will load some more content again

Answer 1

I have updated the fiddle here .
This appends a random number to the 'content' div as soon as it reaches the bottom.

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

Check this Demo Fiddle

Use this

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

OR

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

scrollTop() scrolls the div to the bottom.

prop("scrollHeight") gives your the actual height, and not default display height - height() .