Question

有一个div

    .dialog_container{

    width: 100%;
    height: 500px;

}

新的div消息被附加到容器：

$('.dialog_container').append('<div class="message_container"></div>')

overflow-x:scroll情况下容器的自然行为很明显。但我想要相反，所以当有多个元素比默认容器可以包含时，它会在顶部滚动和延伸，而不是像往常一样在底部。它是信使等主流设计。

我怎么能实现呢？谷歌只帮助一些插件创建自定义滚动标签和东西。

Answer 1

您想获取div的高度，然后使用动画scrollTop为整个高度设置动画。

的jQuery

$(".append").on("click", function(e) {
    e.preventDefault();
  $(".messages-container").append("<p>I'm a new message</p>");

  //Relevant jQuery start
  var height = $(".messages-container")[0].scrollHeight;
  $(".messages-container").animate({
    scrollTop: height
  });
  //Relevant jQuery end
});

HTML

<div class="messages-container">

</div>
<button class="append">
Append Message
</button>

小提琴：https://jsfiddle.net/calder12/nasrk4fk/

更改默认div scroll-x行为

1 个答案: