JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div class="scroller" id="scroller"><div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptas eius nulla voluptatem quidem laboriosam unde quia odit expedita quisquam aliquid facilis esse qui laborum cupiditate aliquam, rerum debitis possimus ipsa iste earum quo officia. Necessitatibus consequatur labore est, provident ea, accusantium ut? Itaque nulla laudantium odit, nostrum, culpa impedit, consequatur ducimus iste asperiores adipisci labore a qui sunt quidem? Nesciunt quisquam minus molestias quia, perspiciatis odit autem perferendis ex. Voluptatum ad dignissimos at fugit! Eligendi nulla odio magnam consequatur, ipsam eos, autem assumenda perferendis, dolorem ut id repellendus repudiandae! Placeat consectetur qui nulla labore, magnam perferendis architecto esse quasi ut expedita nostrum pariatur ea repudiandae sunt amet similique animi, adipisci excepturi et! Pariatur hic dolor totam, corrupti quod deserunt aut aspernatur consectetur similique obcaecati dolore molestias culpa incidunt suscipit odit ipsa nam veritatis nemo magni mollitia, numquam alias recusandae! Maiores quaerat eveniet ut placeat tempore, reprehenderit, reiciendis quas id impedit amet natus vitae? Dicta architecto repudiandae eos corporis ipsum provident laborum atque voluptas sapiente ea, recusandae error, cupiditate, illum ipsa iste eligendi reprehenderit. Alias, hic suscipit molestias sunt fuga ea possimus tempore facilis quisquam velit neque corrupti, non similique qui ut commodi, nulla beatae reprehenderit voluptate culpa sint. Quas iure, veniam assumenda reprehenderit. Voluptate hic nesciunt nemo illum obcaecati molestias possimus necessitatibus fugiat! Fugiat totam, nam, perspiciatis expedita et molestiae sint natus quas provident rerum esse facilis quaerat atque rem, pariatur unde repellat. Facere dolorem, natus. Perferendis similique nihil porro voluptates officia nisi, voluptate, tempora deleniti ut error, quidem placeat et molestiae in totam...

CSS

.scroller {
  width: 200px;
  height: 200px;
  overflow-x: scroll;
}
.content {
  width: 10000px;
}

JavaScript

let scroller = document.getElementById('scroller');
let lastScroll = 0;

scroller.addEventListener('scroll', function (e) {
  let scroll = this.scrollLeft;
  if (scroll === this.scrollWidth - this.offsetWidth) {
  	console.warn('scroll right end');
  } else if(scroll === 0) {
  	console.warn('scroll left end');
  } else if (this.scrollLeft > lastScroll) {
  	console.warn('scroll right');
  } else if (this.scrollLeft < lastScroll) {
  	console.warn('scroll left');
  }
  lastScroll = this.scrollLeft;
})