JSFiddle - React, Tailwind, and code Playground

by zanon

HTML

<div ng-app="scrollApp">
    <scrollbox>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta augue dolor, in sagittis dui imperdiet in. Quisque dignissim lectus rutrum tortor interdum, vitae ullamcorper felis pellentesque. Cras orci felis, accumsan quis aliquam et, pharetra eu augue. Sed sodales nunc eget risus semper, a feugiat tortor porttitor. Donec pellentesque nunc risus, vel mollis enim ullamcorper vel. Donec molestie feugiat efficitur. Maecenas lectus elit, pulvinar sed ultrices eu, dignissim eu elit. Quisque non sollicitudin nisi. Nullam dui sem, sodales sed venenatis vitae, mattis id lacus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta augue dolor, in sagittis dui imperdiet in. Quisque dignissim lectus rutrum tortor interdum, vitae ullamcorper felis pellentesque. Cras orci felis, accumsan quis aliquam et, pharetra eu augue. Sed sodales nunc eget risus semper, a feugiat tortor porttitor. Donec pellentesque nunc risus, vel mollis enim ullamcorper vel. Donec molestie feugiat efficitur. Maecenas lectus elit, pulvinar sed ultrices eu, dignissim eu elit. Quisque non sollicitudin nisi. Nullam dui sem, sodales sed venenatis vitae, mattis id lacus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta augue dolor, in sagittis dui imperdiet in. Quisque dignissim lectus rutrum tortor interdum, vitae ullamcorper felis pellentesque. Cras orci felis, accumsan quis aliquam et, pharetra eu augue. Sed sodales nunc eget risus semper, a feugiat tortor porttitor. Donec pellentesque nunc risus, vel mollis enim ullamcorper vel. Donec molestie feugiat efficitur. Maecenas lectus elit, pulvinar sed ultrices eu, dignissim eu elit. Quisque non sollicitudin nisi. Nullam dui sem, sodales sed venenatis vitae, mattis id lacus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta augue dolor, in sagittis dui imperdiet in. Quisque dignissim lectus...

JavaScript

var app = angular.module('scrollApp', []);

app.directive('scrollbox', function($window) {
    
    angular.element($window).bind('mousewheel', function(event) {        
        
        event.preventDefault();
        
        var currentPosition = $window.pageYOffset;
        var delta = event.wheelDelta;                         
        window.scrollTo(0, currentPosition + delta);
    }); 
    
    return {};
});