How to keep a div scrolled to the bottom as HTML c

问题:

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.

回答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/

回答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/

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

回答4:

div.scrollTop = div.scrollHeight;

but you do not need overflow: hidden.