Javascript 更改默认div scroll-x行为

有一个div

    .dialog_container{

    width: 100%;
    height: 500px;

}

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

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

$（'.dialog_container'）。追加（''）

容器在

溢出时的自然行为-x:scroll

。但我想要相反的结果，这样当有超过默认容器所能包含的元素时，它将在顶部滚动并扩展，而不是像往常一样在底部。这是信使等行业的主流设计

---

我该如何实现这一点？谷歌只帮助一些插件创建自定义滚动标签和其他东西。

你想获取div的高度，然后使用animate 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
});

$（.append”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（“.messages container”）.append（“我是一条新消息”
”；
//相关jQuery开始
变量高度=$（“.messages容器”）[0]。滚动高度；
$（“.messages容器”）.animate({
滚动顶部：高度
});
//相关jQuery端
});

HTML

附加消息

---

小提琴手：

您的确切要求是什么。更具体一点。@DanPhilip overscroll-x behavior，但不是在底部，而是在div的顶部。我希望它是清楚的？所以您只希望在div的顶部进行水平滚动。@DanPhilip是的，一些解决方案或基本实现概念您可以发布搜索时找到的一些引用。

<div class="messages-container">

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