如何通过jquery将HTML内容附加到底部时将div保持滚动到底部,但隐藏滚动条？

Question

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

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

现在这个工作正常,除了我想删除滚动条.除了没有可见的滚动条之外,我希望内容的行为方式与溢出auto一样.

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

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

Answer 1

您只需添加overflow: hidden到容器并在加载内容后滚动它:

div.scrollTop = div.scrollHeight;

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

Answer 2

是的,您可以添加一个事件监听器,当该事件发出时,您可以通过检查高度向下滚动到底部

$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/