JSFiddle - React, Tailwind, and code Playground

by ibcaliax

HTML

<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>

<div class="scrollable"> 
    <h1>scrollable element</h1>
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
</div>

<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>

CSS

.scrollable {
  margin: 10px;
  padding: 10px;
  width: 200px;
  height: 100px;
  background: yellow;
  overflow: auto;
}

JavaScript

var scrollable = document.querySelector('.scrollable');

scrollable.addEventListener('wheel', function(event) {
	var deltaY = event.deltaY;
	var contentHeight = scrollable.scrollHeight;
	var visibleHeight = scrollable.offsetHeight;
	var scrollTop = scrollable.scrollTop;

	if (scrollTop === 0 && deltaY < 0)
		event.preventDefault();
	else if (visibleHeight + scrollTop === contentHeight && deltaY > 0)
		event.preventDefault();
});