JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div style="height:2000px; float:left; width:100%;">
  Text text Text text Text text Text text Text text Text text Text text Text text Text textv Text text Text text Text text Text textText text

</div>

<div class="start">
  START
</div>
<div class="stop">
  STOP
</div>

JavaScript

//run instantly and then goes after (setTimeout interval)

var autoScrollInterval;
var autoScrollTimeout;
var restoreTimeout = null

function autoScroll() {
  $("html, body").animate({
    scrollTop: $(document).height()
  }, 4000);
  setTimeout(function() {
    $('html, body').animate({
      scrollTop: 0
    }, 4000);
  }, 4000);
}

function startAutoScroll() {
  autoScroll();
  autoScrollInterval = setInterval(autoScroll, 8000);
}

function stopAutoScroll() {
  // Stop animation
  $("html, body").stop();

  // clear timeouts and intervals
  clearTimeout(restoreTimeout);
  clearTimeout(autoScrollTimeout);
  clearInterval(autoScrollInterval);

  restoreTimeout = setTimeout(function() {
    // restore auto scrolling
    startAutoScroll();
  }, 1000);
}

//Firefox
$(document).bind('DOMMouseScroll', function(e) {
  stopAutoScroll()
});

//IE, Opera, Safari
$(document).bind('mousewheel', function(e) {
  stopAutoScroll()
});

$(document).on('mousemove', function() {
	stopAutoScroll();
});

$(document).ready(function() {
  startAutoScroll();
});