javascripthtmlscrollmouseeventpure-js

How can I create a custom event for scroll up and down?


The MDN told me how to create a custom event (which I didn't get it well)

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

and I know how to detect mouse scroll as well...

var doScroll = function (e) {
    // cross-browser wheel delta
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    // Do something with `delta`
    document.body.innerHTML = delta;

    e.preventDefault();
};

if (window.addEventListener) {
    window.addEventListener("mousewheel", doScroll, false);
    window.addEventListener("DOMMouseScroll", doScroll, false);
} else {
    window.attachEvent("onmousewheel", doScroll);
}

but I don't know how to mix these two with each other and create a custom event so I can have something like this:

window.addEventListener('scrollUp', sUpFunction);
window.addEventListener('scrollDown', sDownFunction);

Thank you guys.


Solution

  • First I would use the "wheel" event instead of the non-standardrized "mousewheel" event.
    I created a simple implementation of a scrollUp and scrollDown custom events dispatch.

    EDIT

    I have a added the IE polyfill for the CustomEvent in order to support IE as well

    // For IE support
    (function () {
      if ( typeof window.CustomEvent === "function" ) return false; //If not IE
    
      function CustomEvent ( event, params ) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent( 'CustomEvent' );
        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
        return evt;
       }
    
      CustomEvent.prototype = window.Event.prototype;
    
      window.CustomEvent = CustomEvent;
    })();
    
    let element = document.getElementsByClassName("scroll-area")[0],
    scrollUpEvent = new CustomEvent("scrollUp"),
    scrollDownEvent = new CustomEvent("scrollDown");
    
    function scrollDown(){
      console.log("scrolled down");
    }
    function scrollUP(){
      console.log("scrolled up");
    }
    
    function scrollHappened(e){
      if(e.deltaY < 0){
        element.dispatchEvent(scrollUpEvent);
      } else {
        element.dispatchEvent(scrollDownEvent);
      }
    }
    element.addEventListener("wheel", scrollHappened);
    element.addEventListener("scrollUp", scrollUP);
    element.addEventListener("scrollDown", scrollDown);
    .scroll-area {
      border: solid 2px black;
      height: 30px;
    }
    <div class="scroll-area">Scroll on me</div>