Rectangle 27 0

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


div.scrollTop = div.scrollHeight;
overflow: hidden

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.

Note
Rectangle 27 0

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


$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");
  }
});

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

Note
Rectangle 27 0

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


<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>
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!

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.

Note
Rectangle 27 0

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


div.scrollTop = div.scrollHeight;
overflow: hidden

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.

Note
Rectangle 27 0

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


<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>
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!

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.

Note