javascript - 向下滚动动画js

Question

我在 JS 中构建了一种聊天，然后我希望当我收到新消息时聊天会自动向下滚动（带有动画......）。一切都很顺利，但动画停止后用户无法自行滚动；聊天自动滚动到最后。

所以这是代码：

<!-- language:lang-js -->

var height = 1;
window.setInterval(function() {
    var elem = document.getElementById('chat');
    elem.scrollTop = height;
    if (elem.scrollheight < height) {
        clearInterval(this);
    }
    height += 2;
}, 50);

Answer 1

clearInterval函数需要一个数字。使用它应该使它正常工作。您还有许多语法错误。

var intervalReference = window.setInterval(function() {
    var elem = document.getElementById('chat');
    elem.scrollTop = height;
    if (elem.scrollHeight < height) {
        clearInterval(intervalReference);
    }
    height += 2;
}, 50);

Answer 2

你应该制作一个像这样保持间隔的var：

var height = 1;
var interval = window.setInterval( animate, 50 );

function animate() {
    var elem = document.getElementById('chat');
    elem.scrollTop = height;
    if (elem.scrollHeight < height) {
        clearInterval( interval );
    }
    height += 2;
}

这应该可以正常工作