JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
<div class="wrapper">
  <div class="content"></div>
</div>

CSS

.wrapper {
  max-height:300px;
  width:300px;
  background-color:black;
  overflow:hidden;
}

.content {
  color: #fff;
  height: 600px;
  background-image: linear-gradient(#f0f, #0f0);
}

JavaScript

var contentPosition = 0;
$('.wrapper').on('wheel', function (e) {
  e.preventDefault();
  var prevent = false;


  if (e.originalEvent.deltaY < 0) {
  	contentPosition = Math.min(contentPosition - e.originalEvent.deltaY, 0);
    $('.content').css('transform', 'translateY(' + contentPosition + 'px)')
  } else {
  	contentPosition = Math.max(contentPosition - e.originalEvent.deltaY, $('.wrapper').height() - $('.content').height());
    $('.content').css('transform', 'translateY(' + contentPosition + 'px)')
  }
  
  console.log(contentPosition);
});