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;
}

这应该可以正常工作

向下滚动动画js

2 个答案: