当 HTML 内容通过 jquery 附加到它时，如何保持 div 滚动到底部，但隐藏滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15688656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to keep a div scrolled to the bottom as HTML content is appended to it via jquery, but hide the scroll bar?
提问by Eric
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.
下面我有一个基于 js 的小型模拟器，用于不同的命令工具。用户输入一个命令，如果正确，它会显示在顶部。为了将来的使用，我需要确保在完成模拟之前它可以根据需要处理尽可能多的命令。这意味着我不可避免地会有内容溢出。
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.
我现在的解决方案是将 Y 溢出设置为自动，添加滚动条和一个小 jquery 以保持客户端始终滚动到输出 div 的底部，因为每次用户输入时，内容都会附加到前一个内容的下方正确的命令。
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.
现在这工作正常，除了我想删除滚动条。我希望内容的行为方式与overflow auto 的行为方式相同，除非没有可见的滚动条。
Is there a way I could do this with jquery or javascript?
有没有办法用 jquery 或 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.
我知道我可以做一些 css 技巧来使用 z-index 在滚动条上放置某种黑色，但如果可能的话，我想避免这种情况。
回答by dfsq
All you need is to add overflow: hiddento your container and scroll it once content is loaded:
您只需要添加overflow: hidden到您的容器并在内容加载后滚动它：
div.scrollTop = div.scrollHeight;
回答by Josh Bedo
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");
}
});
回答by Andbdrew
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.
继续使用 javascript 进行滚动，并将包含模拟器的 div 放在另一个宽度稍小的 div 中，并将溢出隐藏在外部 div 上。我已经多次使用这种技术，而且非常有趣。
The only thing your should be careful of is that scrollbars are slightly different widths in different browsers, so be careful.
唯一需要注意的是滚动条在不同浏览器中的宽度略有不同，所以要小心。
for example:
例如：
html:
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:
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!
看看这个小提琴 -> http://jsfiddle.net/5bkz5/1/<- 并向下滚动文本！
回答by Michael Bleidistel
div.scrollTop = div.scrollHeight;
div.scrollTop = div.scrollHeight;
but you do not need overflow: hidden.
但你不需要overflow: hidden。
