CODEWITHSUNDEEP
javascriptjquerydomscroll-position
Incognito
Incognito

Reputation: 20785

Maintain scroll position for a div based on scroll bar position

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/

Upvotes: 2

Views: 5833

Answers (4)

Joseph Marikle
Joseph Marikle

Reputation: 78580

I think this is what you're after?

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

Code:

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

Upvotes: 4

Danny
Danny

Reputation: 7518

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()
);

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69915

Try this

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

Upvotes: 0

Jon Martin
Jon Martin

Reputation: 3392

Plain old javascript scroll value:

var scrollVal = myDivElem.scrollTop;

Upvotes: 0

Related Questions