根据滚动条位置保持div的滚动位置

Question

I've got my code written here .

setInterval(
    function (data){
        var alreadyScrolled = $("#smallBox").height() >= $("#smallBox").get()[0].scrollHeight;


        $("#smallBox").append(data + "<br />");
        if (alreadyScrolled) {
            $("#smallBox").scrollTop($("#smallBox").heightoffsetHeight)
        }
    },
    1000, 
    Date()
);


<div id="largeBox">
    <div id="smallBox">
    </div>
    <input />
</div>

What I'm trying to do is, detect if the scroll bar is at the bottom of the window, and if it is, append the new data into the div, then scroll back down to the bottom. In the event that the scroll isn't already at the bottom, do nothing.

I'm not sure which parts of either the DOM or jquery API I can use to accomplish this, I've been trying multiple things and am somewhat stuck here, nothing seems to give me a value in terms of where the scroll bar is, and how much I can can scroll. A percent value would be awesome if I could just get that.

I don't want to use any libraries outside of jQuery, this means no plugins either.

I'm looking to get the same behavior we see in the SO chat rooms, except that it seems to be using the ScrollTo plugin to accomplish what it does.

Update.

I can't just use .height() and .scrollTop, they don't match up.

See this: http://jsfiddle.net/qSx3M/6/

Answer 1

I think this is what you're after?

http://jsfiddle.net/qSx3M/7/

Code:

var alreadyScrolled = $("#smallBox")[0].scrollTop + $("#smallBox").height() == $("#smallBox")[0].scrollHeight;

Answer 2

Took your code and made small modifications. Can't say if it is good code but it works

setInterval(
    function (data){
        var alreadyScrolled = $("#smallBox").height() + $("#smallBox").get()[0].scrollTop >= $("#smallBox").get()[0].scrollHeight;

        console.log(alreadyScrolled);

        $("#smallBox").append(data + "<br />");
        if (alreadyScrolled) {
            $("#smallBox").get()[0].scrollTop = $("#smallBox").get()[0].scrollHeight;
        }
    },
    1000, 
    Date()
);

Answer 3

普通的旧javascript滚动值：

var scrollVal = myDivElem.scrollTop;

Answer 4

Try this

var $this;
  $('#container').scroll(function(){
    $this = $(this);
    if ($this.scrollTop() > $this.height()){
       //Do something here
    }
});