JSFiddle - React, Tailwind, and code Playground

by andyvanee

HTML

<div id="scroller" class="scroll-container">
  <p>
    This container will auto-scroll up and down until the user manually scrolls it. After the user stops scrolling, the auto-scroll will resume in 2 seconds.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed enim ut sem viverra. Eu scelerisque felis imperdiet proin fermentum. Varius vel pharetra vel turpis. Consequat nisl vel pretium lectus quam id. Vestibulum lorem sed risus ultricies tristique nulla. Rhoncus mattis rhoncus urna neque viverra justo. Nisl nunc mi ipsum faucibus vitae aliquet nec. Amet consectetur adipiscing elit ut aliquam purus sit amet. Turpis massa tincidunt dui ut.
  </p>
</div>

CSS

.scroll-container {
  height: 300px;
  width: 280px;
  overflow-y: scroll;
  border: 2px solid black;
  padding: 3px;
}

JavaScript

const scroller = document.querySelector('#scroller')
const state = {
	scrollDown: true,
  pauseTimeout: false
}

const autoScrollListener = (ev) => {
	scroller.addEventListener('scroll', defaultScrollListener)
}

const defaultScrollListener = (ev) => {
  scroller.dataset.scrollPause = 'paused'
  if (state.pauseTimeout) clearTimeout(state.pauseTimeout)
	state.pauseTimeout = setTimeout(() => {
    delete scroller.dataset.scrollPause
    state.pauseTimeout = false
  }, 2000)
}

setInterval(() => {
  if (scroller.scrollTop >= scroller.scrollHeight - scroller.offsetHeight) {
  	state.scrollDown = false
  }
  if (scroller.scrollTop <= 0) {
	  state.scrollDown = true
  }
  if (!scroller.dataset.scrollPause) {
  	scroller.removeEventListener('scroll', defaultScrollListener)
  	scroller.addEventListener('scroll', autoScrollListener, {once: true})
	  scroller.scrollTop += state.scrollDown ? 1 : -1
  }
}, 24)