JSFiddle - React, Tailwind, and code Playground

by allcaps

HTML

<div ng-app="app" ng-controller="controller">
        <div
            class="scroll-here"
            ng-mouse-wheel-up="up()" 
            ng-mouse-wheel-down="down()">
                Mouse Wheel Scroll Here
        </div>
        <p>See console log.</p>
</div>

CSS

.scroll-here {
    width:200px;
    height:10000px;
    border:1px solid #ccc;
}

JavaScript

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

// app.controller("parametersController", function($scope, sharedScope) {

function controller($scope) { 
    $scope.up = function() {
            console.log('up');
        };
    
    $scope.down = function() {
            console.log('down');
        };
}

app.directive('ngMouseWheelUp', function () {
    return function (scope, element, attrs) {
        element.bind("mousewheel", function (event) {

            var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));

            if (delta > 0) {
                scope.$apply(function () {
                    scope.$eval(attrs.ngMouseWheelUp);
                });


                    event.preventDefault();


            }
        });
    };
});


app.directive('ngMouseWheelDown', function () {
    return function (scope, element, attrs) {
        element.bind("DOMMouseScroll mousewheel onmousewheel", function (event) {

            var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));

            if (delta < 0) {
                scope.$apply(function () {
                    scope.$eval(attrs.ngMouseWheelDown);
                });

                if (event.preventDefault) {
                    event.preventDefault();
                }

            }
        });
    };
});