onWheelHandler

In this example below you will see how to do a onWheelHandler with some HTML / CSS and Javascript

Script to check either if scrolling up or scrolling down

Thumbnail
This awesome code was written by sugarskill, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sugarskill ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>onWheelHandler</title>
  
  
  
  
  
</head>

<body>

  <p id="action"></p>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/sugarskill/onwheelhandler-RNmPvR */
(function($){
  $.fn.scrollController = function(e) {
    var delta = 0;
    var methods = {
			onWheelHandler: function(e) {
        delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? delta + 1 : delta - 1;
				if (Math.abs(delta) >= 5) {
         	if(delta > 0) {
            $('#action').text('scrolling up');
          } else {
            
            $('#action').text('scrolling down');
          }
     delta = 0;
        }
      }
    };
    
    	
		$(document).on('mousewheel DOMMouseScroll', methods.onWheelHandler);
  };

})(jQuery);
jQuery(document).ready( function($){ 
	$(document).scrollController();
});

Comments