How to disable my element auto-scroll briefly

Question

I used the answer to this question to auto-scroll a combat log for my HTML5 game to the bottom:

How to auto-scroll to end of div when data is added?

If I want to briefly disable this while a person clicks to scroll up and view the log, how would I do so?

The Code I'm using is:

//autoscroll combat log

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

Best regards, Cobwebs

Edit: the code above is connected to a simple span in a div:

<div>
    <span id='log'></span>
</div>

Stylized to have a scrollbar:

span#log {

    display: block;
    font-family: courier, sans;
    margin: auto;
    border:1px solid black;
    width:600px;
    height:200px;
    overflow:auto;
    background-color:black;
    color: lime;
    text-align: left;

}

Juan · Accepted Answer · 2014-02-26T01:27:10.230

0

setInterval() returns an ID, with that ID you can use clearInterval() to stop it

var intervalID = window.setInterval(function() {
  var elem = document.getElementById('log');
  elem.scrollTop = elem.scrollHeight;
}, 500);

and then this

window.clearInterval(intervalID);

small DEMO

edited Feb 26 '14 at 01:27

answered Feb 26 '14 at 01:21

Juan

4,910
3
37
46

Thank you! This works. Is there a way to trigger it when the player clicks to scroll up? – cobwebs Feb 26 '14 at 05:50
@cobwebs you need to provide more information or small demo to how you are doing things – Juan Feb 26 '14 at 16:15

How to disable my element auto-scroll briefly

1 Answers1