Javascript 自动滚动 div 内容，同时仍然可以手动滚动

Question

window.setInterval(function() {
var elem = document.getElementById('pullout');
elem.scrollTop = elem.scrollHeight;
}, 0);

Im currently using this code to scroll automatically to the bottem. But whenever I want to scroll manualy, I simply can't. Because thats how this code above works. Can someone help me with this?

I want the code above + being able to manualy scroll and disable the automatic scroll. But how do I code that?

Answer 1

You set the interval but it never stop. So whenever you try to scroll, the interval sets it back to the bottom. Given that your interval is 0ms, your code is faster than you when it comes to scroll. to solve the problem, you simply have to remove the setInterval . Maybe you are attempting to implement smooth scrolling; if its the case, you are wrong as your code simply automatically scrolls to the bottom. Simply use:

 function funcName(){
   var elem = document.getElementById('pullout');
   elem.scrollTop = elem.scrollHeight; 
  }

Answer 2

Instead of scrolling continuously, I would only scroll when a new chat message is added. Something like this:

function scrollToBottom() {
    var elem = document.getElementById('pullout');
    elem.scrollTop = elem.scrollHeight;
}

Then, find your code that adds a new chat message, and call scrollToBottom() after the message is added.

Answer 3

setInterval repeatedly executes the callback provided . An alternative is to use requestAnimationFrame which is a "1 shot" callback :

window.requestAnimationFrame(function() {
var elem = document.getElementById('pullout');
elem.scrollTop = elem.scrollHeight;
}, 0);