CODEWITHSUNDEEP
javascripthtmljquery
jack
jack

Reputation: 315

Off / on scroll by javascript button

Here is a <div> which is scrolled to the bottom as default;

<div id="idname" style="max-height:100px; width: 100px; overflow:auto;">
 <p>a<p>
 <p>a<p>
 <p>a<p>
 <p>a<p>
 <p>a<p>
</div>

<button id="offon">scrolldown off/on</button>

<script>
function updateScroll(){
    var element = document.getElementById("idname");
    element.scrollTop = element.scrollHeight;
}
setInterval(updateScroll);
</script>

Below the <div> is a button. How can I keep the scrolled down function on by default, disable the funtion when clicking the button, and re-able it by clicking it again?

Upvotes: 0

Views: 56

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You could try something like this, it will start/stop the Interval:

var scrollEnable = true;
var add;

function start() {
  add = setInterval(function() {
    var element = document.getElementById("idname");
    element.scrollTop = element.scrollHeight;
  }, 100);
}

$('#offon').click(function() {
  console.log(scrollEnable)
  if (scrollEnable) {
    clearInterval(add)
  } else {
    start();
  }
  scrollEnable = !scrollEnable;
});

start();

Demo

var scrollEnable = true;
var add;

function start() {
  add = setInterval(function() {
    var element = document.getElementById("idname");
    element.scrollTop = element.scrollHeight;
  }, 100);
}

$('#offon').click(function() {
  console.log(scrollEnable)
  if (scrollEnable) {
    clearInterval(add)
  } else {
    start();
  }
  scrollEnable = !scrollEnable;
});

start();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="idname" style="max-height:100px; width: 100px; overflow:auto;">
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
</div>

<button id="offon">scrolldown off/on</button>

Upvotes: 2

Related Questions