JSFiddle - React, Tailwind, and code Playground

by Milan Karagunović

HTML

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu dolor enim. Integer aliquam a lacus vitae feugiat. Donec vehicula, velit a lacinia bibendum, leo neque consequat neque, quis vehicula purus quam non arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultrices vulputate augue. Curabitur tempor convallis ante vel condimentum. Vestibulum sagittis laoreet massa vel adipiscing. Duis in fringilla elit. Duis egestas non leo nec imperdiet. Fusce rutrum ultricies quam.</p>

  <p>Phasellus non dui lacinia ligula luctus ultrices sed vitae elit. Praesent libero lacus, fermentum at nunc quis, pharetra malesuada nisl. Maecenas nec adipiscing arcu. Phasellus ultrices lorem metus, a porttitor mi mollis non. Quisque non dapibus mauris, ac mattis velit. Fusce tempor odio leo, non auctor justo facilisis vel. Integer malesuada ligula quis sem tempor, ac sagittis enim pellentesque. Quisque sodales feugiat augue, sed hendrerit dolor. Aenean et egestas justo.</p>

  <p>Morbi hendrerit pellentesque sapien, a bibendum odio sagittis non. Quisque at vulputate erat, sed auctor enim. Integer semper sapien sit amet justo ullamcorper eleifend. Vivamus laoreet felis mollis mauris tempor, pulvinar suscipit felis consequat. Pellentesque mollis lacinia massa at lobortis. Phasellus tempor nulla tortor, id porttitor ligula ultricies in. In ac sagittis erat. Donec faucibus erat vel lacus scelerisque suscipit. Nulla sollicitudin eu ligula non fermentum. Fusce eu enim urna. Sed fermentum lacinia lacus, consectetur aliquet elit sollicitudin ac. Duis vitae dui nec nunc aliquet cursus in sed velit. Aenean pulvinar ligula vel sapien lacinia, pulvinar fermentum ipsum tempus.</p>

  <p>Morbi eget diam placerat, sodales sem ut, faucibus metus. Maecenas nisi dolor, rutrum ut libero tristique, posuere feugiat quam. Praesent feugiat purus lorem, eu accumsan risus pretium vel. Fusce in eros ac nunc ornare dapibus sit amet nec mi....

CSS

body {
    background: #f1f1f1;
    height: 1200px;
}
div {
    background: #fff;
    height: 400px;
    padding: 0 10px;
    overflow: scroll;
    overflow-x: hidden;
    border: 1px solid #ccc;
}

JavaScript

$('div').on('mousewheel DOMMouseScroll', function(e) {
  var scrollTo = null;

  if(e.type === 'mousewheel') {
     scrollTo = (e.originalEvent.wheelDelta * -1);
  }
  else if(e.type === 'DOMMouseScroll') {
     scrollTo = 40 * e.originalEvent.detail;
  }

  if(scrollTo) {
     e.preventDefault();
     $(this).scrollTop(scrollTo + $(this).scrollTop());
  }
});