Scrolling should occur only when scroller is at the bottom of div. How do I achieve this functionality

Question

I have a div and I want to add new content to the div. And the scroller should move right at the bottom only if the scroller is at the bottom and not when anywhere else...

<div id="tabs-3" style="height: 600px;">
            <div class="leftDiv">
                <div class="messagesContainer" id="messageContainerId">
                    <ul class="ulList" id="ul1" data-bind="template: { name: 'messagesTemplate', foreach: messages3, as: 'messages3' }"></ul>
                </div>
            </div>
            <div class="rightDiv">
                <h4 class="tabHeader"></h4>
                <ul id="ul-3" style="list-style-type: none;">
                </ul>
            </div>
        </div>

.messagesContainer {
    margin-left: 0px;
    overflow: auto;
    height:550px;
}

$('#messageContainerId').animate({ scrollTop: $("#messageContainerId").position().top + 10000}, 2000);

I can get the scrolling to work. But I just want the scroll to move only when scrollbar is at the bottom.

What javascript code do I need to add to get this functionality

Answer 1

我在Google上搜索后找到了答案！！！