JSFiddle - React, Tailwind, and code Playground

by Mike Jacobson

HTML

<div class="outer">
  <div class="inner"></div>
</div>
<button type="button" onclick=handleClick()>Scroll</button>

CSS

.outer {
  width:  100px;
  height: 100px;
  overflow-y: auto;
}

.inner {
  width : 100px;
  height: 200px;
}

JavaScript

const outer = document.querySelector('.outer');
outer.addEventListener('scroll', e => {
	console.log(">> e: ", e);
});

function handleClick() {
	console.log("click!");
  console.log("scrolltop: ", outer.scrollTop);
//  outer.scrollTop = 42;
outer.dispatchEvent(new Event('scroll'));
  
}