How to create a sidebar that appears when there is a horizontal scroll?

Question

I want to create a website that checks for the wheel event and when the user swipes(scrolls) from left to right in the trackpad, i want to open a sidebar. Unfortunately there is no examples in the web for this implementation of the wheel event. Can you help me out? Please no jquery.

Answer 1

Based on this answer but I got a lot of fun doing this, the scrolling part is working, scroll left triggers when I scroll left and viceversa (also you gotta give me props for refreaining from the use of JQuery):

window.addEventListener('load', function(){
      var lastScrollLeft = 0;
      window.addEventListener("scroll", function(){
         var st = window.pageXOffset || document.documentElement.Element.scrollLeft; 
         if (st > lastScrollLeft){
             console.log("scrollLeft");
         } else {
             console.log("scrollRight");
         }
         lastScrollLeft = st <= 0 ? 0 : st; 
      }, false);
    });