How to keep a div scrolled to the bottom as HTML content is appended to it via jquery, but hide the scroll bar?

Question

Below I have a small js based simulator for different command tools. The user enters a command, and if it's correct, it displays it at the top. For future uses, I need to make sure it can handle as many commands as needed before completing the simulation. This means inevitably I'll have content overflowing.

My solution now was setting the Y overflow to auto, adding the scrollbar, and a little jquery to keep the client scrolled to the bottom of the output div at all times, because the content is being appended below the previous content each time a user enters the correct command.

Right now this works fine, except I would like to remove the scroll bar. I'd like the content to behave in the same way overflow auto would and does, except without a visible scrollbar.

Is there a way I could do this with jquery or javascript?

I know I can do some css tricks to put some sort of black over the scrollbar with a z-index, but I'd like to avoid that if possible.

Solution 1

All you need is to add overflow: hidden to your container and scroll it once content is loaded:

div.scrollTop = div.scrollHeight;

Demo http://jsfiddle.net/nT75k/2/

Solution 2

Yes, you can add an event listener and when that event is emitted you can have it scroll down to the bottom by checking the height like so

$container = $('.container');
$container[0].scrollTop = $container[0].scrollHeight;

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $container = $('.container');
    $container.append('<p class="row">' + e.target.value + '</p>');
    $container.animate({ scrollTop: $container[0].scrollHeight }, "slow");
  }
});

http://jsfiddle.net/w2qbe/

Solution 3

Continue to use javascript to do the scrolling, and put the div containing your simulator inside another div that's slightly less wide and do overflow hidden on the outer div. I've used this technique a couple of times, and it's pretty fun.

The only thing your should be careful of is that scrollbars are slightly different widths in different browsers, so be careful.

for example:

html:

<div id="outside">
    <div id="inside">
        <div>more content 1</div>
        <div>more content 2</div>
        <div>more content 3</div>
        <div>more content 4</div>
        <div>more content 5</div>
        <div>more content 6</div>
        <div>more content 7</div>
        <div>more content 8</div>
        <div>more content 9</div>
        <div>more content 8</div>
        <div>more content 7</div>
        <div>more content 6</div>
        <div>more content 5</div>
        <div>more content 4</div>
        <div>more content 3</div>
        <div>more content 2</div>
        <div>more content 1</div>
    </div>
</div>

css:

div#outside {
    width: 120px;
    height: 100px;
    overflow: hidden;
}

div#inside {
    width: 135px;
    height: 100px;
    overflow-y: auto;
}

Check out this fiddle -> http://jsfiddle.net/5bkz5/1/ <- and scroll down over the text!

Solution 4

div.scrollTop = div.scrollHeight;

but you do not need overflow: hidden.

View more solutions

Comments

[Eric]

Works beautifully. I guess I intuitively assumed overflow hidden worked almost like display none, in that the content that's hidden doesn't exist and would'nt allow you to scroll inside the div. @josh I have no idea why someone downvoted you.