向下滚动动画js

Question

I built a kind of chat in JS and then I wanted that when I got new message the chat automatically scrolled down (with animation...). Everything worked beautifully, but after the animation stopped the user couldn't scroll by himself; the chat automatically scrolled to the end.

So this is the code :

<!-- 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

the clearInterval function expects a number. Using that should make it work correctly. You also have many syntax errors.

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

Answer 2

you should make a var holding the interval like this :

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

this should work fine