JSFiddle - React, Tailwind, and code Playground

by Snj

HTML

<div id="one">Scroll over me! Then try scrolling in the white below.</div>

CSS

#one {
    height: 200px;
    background-color: yellow;
}

JavaScript

console.clear();

var video = $('#one').get(0);
var increments = 2; //steps two seconds for each scroll event
var videoReady = false;
var continueUpdatingVideo = false;

$(document).ready(function(){
  $('#one').bind('DOMMouseScroll mousewheel', function(e){
      e.preventDefault();

      $("body").append("<p>scrolling...</p>");
      if(videoReady && continueUpdatingVideo) {
        var delta = Math.max(-1, Math.min(1, (e.originalEvent.wheelDelta || -e.originalEvent.detail))); //either +1 or -1
        updateVideo(delta * increments);
      }

      return false;
  });
});

function updateVideo(delta) {
  var videoLength = video.duration;
  var videoPosition = (video.currentTime + delta > videoLength) ? videoLength : ((video.currentTime + delta < 0) ? 0 : video.currentTime + delta);
  video.currentTime = videoPosition;
}