CSS 溢出的自動滾動：滾動

Question

我正在開發一個聊天應用程序，並且我有一個應該顯示消息的背景。 為了不只是簡單的溢出，我將此行添加到 css: overflow-y: scroll; 這將添加一個滾動條。 這一切都很好，但是有沒有辦法自動滾動到最新消息所在的底部。 它也可以在 JavaScript 中。

我的 html 代碼如下所示：

<article id="chat">
    <script src="chat.js"></script>
</article>

每條消息都將具有此表單並被添加到文章中：

"<p class='msg'>" + msg + "</p>"

Answer 1

片段更改：

 var targetElm = document.querySelector('.boxChild'), // reference to scroll target button = document.querySelector('button'); // button that triggers the scroll // bind "click" event to a button button.addEventListener('click', function(){ targetElm.scrollIntoView() })

 .box { width: 80%; border: 2px dashed; height: 180px; overflow: auto; scroll-behavior: smooth; /* <-- for smooth scroll */ }.boxChild { margin: 600px 0 300px; width: 40px; height: 40px; background: green; }

 <button>Scroll to element</button> <div class='box'> <div class='boxChild'></div> </div>

Answer 2

我不得不稍微改變一下“如此地獄”的答案，因為他的答案只適用於一條消息。 我給每條消息一個唯一的 id，然后使用以下命令滾動到該 id：

document.querySelector("#msgid" + msgId).scrollIntoView();