如何通过jquery将HTML内容添加到div的底部，但隐藏滚动条？
下面我有一个小型的基于js的模拟器，用于不同的命令工具。用户输入一个命令，如果输入正确，它会在顶部显示该命令。为了将来的使用，在完成模拟之前，我需要确保它可以处理所需的任意多个命令。这意味着我不可避免地会有内容溢出。
我现在的解决方案是将Y overflow设置为auto，添加滚动条，并添加一些jquery以使客户端始终滚动到输出div的底部，因为每次用户输入正确的命令时，内容都会附加到前一个内容的后面。
现在，除了我想删除滚动条之外，这一切都可以正常工作。我希望内容的行为方式和overflow auto一样，除了没有可见的滚动条。
有没有办法可以用jquery或javascript做到这一点？
我知道我可以做一些css技巧，用z索引在滚动条上放置一些黑色，但如果可能的话，我想避免这种情况。
回答 4
Stack Overflow用户
发布于 2013-03-29 01:56:07
您只需将overflow: hidden添加到您的容器中，并在加载内容后滚动它：
div.scrollTop = div.scrollHeight;演示http://jsfiddle.net/nT75k/2/
Stack Overflow用户
发布于 2013-03-29 01:48:46
可以，您可以添加一个事件侦听器，当该事件被发出时，您可以像这样检查高度，让它向下滚动到底部
$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/
Stack Overflow用户
发布于 2013-03-29 01:49:54
继续使用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/ <-并向下滚动文本！
https://stackoverflow.com/questions/15688656
复制相似问题
腾讯云开发者
