JSFiddle - React, Tailwind, and code Playground

by Alejandro Casas

HTML

<div class="screen">

  </div>
  <div class="content">Pellentesque habitant morbi
    tristique senectus et netus
    et malesuada fames ac turpis
    egestas. Vestibulum tortor quam,
    feugiat vitae, ultricies eget,
    tempor sit amet, ante. Donec eu
    libero sit amet quam egestas semper.
    Aenean ultricies mi vitae est. Mauris
    placerat eleifend leo. Aenean ultricies
    mi vitae est. Mauris placerat eleifend leo
    Pellentesque habitant morbi
      tristique senectus et netus
      et malesuada fames ac turpis
      egestas. Vestibulum tortor quam,
      feugiat vitae, ultricies eget,
      tempor sit amet, ante. Donec eu
      libero sit amet quam egestas semper.
      Aenean ultricies mi vitae est. Mauris
      placerat eleifend leo. Aenean ultricies
      mi vitae est. Mauris placerat eleifend leo
      Pellentesque habitant morbi
        tristique senectus et netus
        et malesuada fames ac turpis
        egestas. Vestibulum tortor quam,
        feugiat vitae, ultricies eget,
        tempor sit amet, ante. Donec eu
        libero sit amet quam egestas semper.
        Aenean ultricies mi vitae est. Mauris
        placerat eleifend leo. Aenean ultricies
        mi vitae est. Mauris placerat eleifend leo
  </div>

CSS

.screen,
  .content{
    top:200px;
    left:200px;
    width: 190px;
    height: 300px;
    position: absolute;
  }
  .screen {
    border: 2px solid #000;
    z-index: 10;
    }

JavaScript

$(function(){
      $('.screen').bind('mousewheel', function(e){
          if(e.originalEvent.wheelDelta /120 > 0) {
              console.log($( ".content" ).position().top);
              $( ".content" ).css( "top", $( ".content" ).position().top+=5 );
          }
          else{
              $( ".content" ).css( "top", $( ".content" ).position().top-=5 );
          }
      });
  });