Hold scroll bar always at the bottom

Question

I have a div element and a simple style sheet for it :

CSS:

.container{
    width:200px;
    max-height:200px;
    border:1px solid red;
    overflow-y:scroll;
}

HTML:

<div class="container">
</div>

And i have a button for add contents to the div, as you know my div's height grows then has an scroll bar. When i add new contents to the container, i want to show the last added item. I try to use scrollTop() jQuery function with infinite value but it didn't work. Any Idea?

The Fiddle

Edit : Because of using max-height, the maximum value of height property is 200. So i can't use this approach :

$(".container").scrollTop($(".container").heigth());

Now, i can do it like this:

$(".container").scrollTop(10000);

And it's working, but i think it isn't good idea!

Update

Thanks to Nicole Van for the simple and great approach! I change my fiddle with her solution : The Updated Fiddle

If the new items have an ID, you could use URL hash strings. Admittedly that's a bit clunky though. — ArtOfCode, Aug 24 '14 at 21:05
@ArtOfCode What do you mean??? i only talk about some css-tricks — Saman Gholami, Aug 24 '14 at 21:06
I mean the string on the end of a URL containing the ID of the element that the page should scroll to when loaded. — ArtOfCode, Aug 24 '14 at 21:07
@ArtOfCode please see the fiddle, i haven't any page, i have a container for scroll. — Saman Gholami, Aug 24 '14 at 21:08
Would this work http://stackoverflow.com/questions/8579643/simple-jquery-scroll-to-anchor-up-or-down-the-page when you just add an anchor to the added element? — matthias_h, Aug 24 '14 at 21:08
I think if you are using jQuery you could write it like $(".container").scrollTop($(".container")[0].scrollHeight); — Santiago Rebella, Aug 24 '14 at 21:43
Your scroll container is itself contained within a page that can be accessed via a URL. That's a universal constant for any HTML file. — ArtOfCode, Aug 24 '14 at 23:24

Santiago Rebella · Answer 1 · 2014-08-24T21:18:52.567

1

How are you adding? appending or preppending?

I mean you could get the new height of your container and scrollTo your new height if appending or scrollTo 0 if preppending

---EDIT this makes the trick:

$(".add").click(function(){
    i++;
    var s ="<p>added value "+i+" ! </p>";
    $(".container").append(s);
    var heightContainer = $(".container").height();
    $(".container").scrollTop(heightContainer);
});

-----EDIT------- This makes it, it overpass allways its innerheight so it works, even its not accurate:

var i=0;
$(".add").click(function(){
    i++;
    var s ="<p>added value "+i+" ! </p>", heightContainer;
    $(".container").append(s);
    heightContainer = $(".container").height() * i;
    $(".container").scrollTop(heightContainer);
});

The ideal solution is that you know the height of the elemnts you are inserting so the heightContainer will be elemHeight * i

edited Aug 24 '14 at 21:18

answered Aug 24 '14 at 21:05

Santiago Rebella

2,399
2
22
29

If you see the fiddle, i'm appending some new contents. – Saman Gholami Aug 24 '14 at 21:07
your solution doesn't work if i add more than 12 items.I'm using FireFox latest version. – Saman Gholami Aug 24 '14 at 21:12
This is working, but actually there are no difference between your solution and $(".container").scrollTop(10000); because after 10 times, the heightContainer will be more than 2000! – Saman Gholami Aug 24 '14 at 21:29
@SamanGholami thats why im telling you about ideally knowing the elems height so you can calculate the exact scroll position, alternative is what Nicole mentions above, scrollHeight – Santiago Rebella Aug 24 '14 at 21:31

score 1 · Accepted Answer · edited May 23 '17 at 11:46

1

 function ScrollToBottom(){
     var d = document.getElementById("MyDiv");
     d.scrollTop = d.scrollHeight;
}

Take a look at some other jQuery solutions here:

Scroll to bottom of div?

edited May 23 '17 at 11:46

Community

1
1

answered Aug 24 '14 at 21:28

Nicole Ionita Van Vloten

41
4

Hold scroll bar always at the bottom

2 Answers2