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

Question

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

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

现在这工作正常，除了我想删除滚动条。我希望内容以与溢出自动相同的方式运行，除非没有可见的滚动条。

有没有办法用 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/

Answer 3

继续使用 javascript 进行滚动，并将包含模拟器的 div 放在另一个宽度稍小的 div 中，并在外部 div 上隐藏溢出。我已经使用过这种技术几次，而且非常有趣。

唯一需要注意的是滚动条在不同浏览器中的宽度略有不同，所以要小心。

例如：

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;
}

查看这个小提琴 -> http://jsfiddle.net/5bkz5/1/ <- 并向下滚动文本！

Answer 4

div.scrollTop = div.scrollHeight;

但你不需要overflow: hidden。