JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<div id="outer-container">
  <div id="inner-container">
    <div id="left-sidebar">
    </div>
    <div id="content-container">
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
    </div>
    <div id="right-sidebar">
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
      <div class="box">Hello</div>
    </div>    
  </div>
</div>

CSS

#outer-container {
  width: 90vw;
  height: 90vh;
  margin: 0 auto;
  background-color: orange;
}
#left-sidebar {
  width: 20vw;
  height: 90vh;
  background-color: LightSkyBlue;
  float: left;
}
#right-sidebar {
  width: 20vw;
  height: 90vh;
  background-color: LightSlateGrey;
  float: left;
  overflow-y: auto;
}
#content-container {
  width: 50vw;
  height: 90vh;
  background-color: blue;
  float: left;
}
.box {
  width: 100%;
  height: 100px;
  background-color: tomato;
  border-bottom: 1px solid black;
}

#content-container .box {
  width: 80%;
  margin: 0 auto;
  background-color: NavajoWhite;
}

JavaScript

var rightSidebar = document.querySelector('#right-sidebar');
var body = document.querySelector('#outer-container');

rightSidebar.onscroll = function (event) {
}

rightSidebar.addEventListener('wheel', function (event) {
	console.log(event);
  var meetBottom = (rightSidebar.scrollHeight - rightSidebar.clientHeight) === rightSidebar.scrollTop;
  var isUpward = event.deltaY < 0;
  var isDownward = event.deltaY > 0;
	if (meetBottom && isDownward) {
  	event.preventDefault();
    event.stopPropagation();
  }
})