AutoScrolling in javascript div

Question

When i am using the above function in javascript div to auto scroll in chat box but i am not able to scroll up to bottom.

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

The chatlog is a div in my code and I have put above function to scroll the replies. Now I cannot scroll up.

chatlog is div in my code and i have put above function to scroll the replies now i cannot scroll up — Abdul, Jun 23 '16 at 07:13
This is already answered here: http://stackoverflow.com/questions/7303948/how-to-auto-scroll-to-end-of-div-when-data-is-added — Nestoraj, Jun 23 '16 at 07:14
Please make sure your chatlog element has height property set so that scrolltop can work — Piyush.kapoor, Jun 23 '16 at 07:14

score 2 · Accepted Answer · answered Jun 23 '16 at 07:14

2

This is logical mistake. In your code every 10 ms your script will scroll div to bottom. There are many variants how to implement autoscroll behaviour. One of them use flag, which will set up by checkBox (autoscroll). If checkBox is selected script will scroll down, if deselected script will do nothing.

Something like:

window.setInterval(function() {
 if (needAutoScroll) {
     var elem = document.getElementById('chatlog');
     elem.scrollTop = elem.scrollHeight;
 }
}, 10);

answered Jun 23 '16 at 07:14

Sabik

1,599
1
11
10

It might also be clever to automatically check the box when you scroll to the bottom (if it wasn't previously unchecked manually), and automatically uncheck the box when you start scrolling up. This is more complicated logic though, so would take more explaining. – Merlyn Morgan-Graham Jun 23 '16 at 07:30
Yes, it is possible :-) Just question was: Now I cannot scroll up. So i provided one of simplest decision. – Sabik Jun 23 '16 at 07:44
Of course. Just got inspired by your answer :) Cheers! – Merlyn Morgan-Graham Jun 23 '16 at 08:01
Thanks, so much. We can do awesome scrolls :-) – Sabik Jun 23 '16 at 08:11

score 0 · Answer 2 · answered Jun 23 '16 at 07:19

My guess is , since it is scrolling down to the bottom of the div every second , you are not able to scroll up. So on scroll up you have to clear the setInterval function.

You can try this in you chatlog div.

<div id="chatlog" onscroll="myStopFunction()">

function myStopFunction() {

if document.body.scrollTop <= 0 {
 console.log("scrolling down")
} else {
console.log("scrolling up");
 clearInterval(myVar);
}

}

Again on scroll down you can trigger the setInterval function.

AutoScrolling in javascript div

2 Answers2