Question

我想在div中添加一些文字时向下滚动到底部。这是我的代码。我找不到为什么它不起作用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.onload = () => {
                const add = document.getElementById('add');
                const c = document.getElementById('content');
                add.addEventListener('click', () => {
                    c.innerHTML += '<p>aaaaa</p>';
                    c.scrollTop = c.scrollHeight;
                });
            };
        </script>
    </head>
    <body>
        <button id="add">add</button>
        <div id="content">
        </div>
    </body>
</html>

Answer 1

我建议使用scrollIntoView方法。

而不是c.scrollTop = c.scrollHeight;而是c.scrollIntoView(false);。

您尝试的解决方案（c.scrollTop = c.scrollHeight;）不起作用，因为您动态地将元素附加到div中。我的意思是这样的解决方案是一次性交易。如果更改内容，则必须重新执行滚动。

除此之外，您还可以使用window.scrollTo方法执行以下操作：

window.scrollTo(0, c.scrollHeight);

Answer 2

如果你想向下滚动，你必须使用它：

window.scrollTo(0,c.scrollHeight);

Answer 3

使用(HashMap, LinkedHashMap)代替scrollIntoView()＆amp; scrollTop并且不要忘记按住按钮，否则您将不断向上滚动以继续。

如何始终滚动到底部？

3 个答案: