当通过jquery将HTML内容附加到div时，如何保持div滚动到底部，但隐藏滚动条? [英] How to keep a div scrolled to the bottom as HTML content is appended to it via jquery, but hide the scroll bar?

问题描述

下面，我有一个基于js的小型模拟器，用于不同的命令工具.用户输入命令，如果正确，它将显示在顶部.为了将来使用，我需要确保它可以在完成仿真之前处理尽可能多的命令.这意味着不可避免地会有内容溢出.

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.

我的解决方案现在是将Y溢出设置为auto，添加滚动条和一个小jquery以使客户端始终始终滚动到输出div的底部，因为每次都将内容追加到先前内容的下方用户输入正确的命令.

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.

有没有办法用jquery或javascript做到这一点?

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

我知道我可以做一些css技巧，以使用z-index在滚动条上放置一些黑色，但是我想尽可能避免这种情况.

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.

推荐答案

您需要做的就是将overflow: hidden添加到您的容器中，并在内容加载后滚动它:

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

div.scrollTop = div.scrollHeight;

演示 http://jsfiddle.net/nT75k/2/

这篇关于当通过jquery将HTML内容附加到div时，如何保持div滚动到底部，但隐藏滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！