Question

我将<ul>定义为

<ul id="messages">

</ul>

我没有在html中定义任何<li>项，但在我的javascript中，我使用jquery将<li>项添加到<ul>

$("#messages").append("<li>" + string + "</li>");

当我不断添加消息时，当它有太多的li项目适合屏幕时，它不会自动向下滚动到最新添加的li项目。如何让li向下滚动？

Answer 1

您需要使用CSS来实现此目的：

ul {
overflow-y: scroll;
}

您还需要为UL提供最大高度才能正常工作。

Answer 2

您是否希望在添加页面时自动将页面向下滚动到li？

您需要使用jQuery和javascript从窗口顶部获取<li>的偏移量。然后设置将窗口滚动到该位置。

var offset = $('li').offset().top;

$('body').scrollTop(offset);

Here's an example

如果你想要动画，请使用以下内容：

$('html,body').animate({
      scrollTop: offset
}, 1000);

Answer 3

我已经在点击事件上完成了，因为您在添加项目时没有真正说过

您需要获得工作示例的HTML

<button id="click">Click me</button>
<ul id="messages">

</ul>

JQuery是

 $(document).ready(function (){
        $("#click").click(function (){ 
            $("#messages").append("<li>pow</li>");
            //$(this).animate(function(){
                $('html, body').animate({
                    scrollTop: $("#messages li").last().offset().top
                }, 2000);
            //});
        });
    });

JSFiddle

如何使ul在满时向下滚动？

3 个答案: