get scroll-x event on JS

event-scroll-x.js

var target = document.getElementsByTagName('main')[0];
var res = document.getElementsByClassName('result')[0];

function createEventScrollX(ele){
  this._past_scroll_left = 0;
  this.ev_scroll_x = new CustomEvent('scroll-x', {bubbles:true, cancelable:true});
  this.dispatch_callback = function(ev){
    var cuT = ev.currentTarget;
    var now_l = cuT.scrollLeft;
    if(now_l !== this.past_scroll_left){
      ele.dispatchEvent(this.ev_scroll_x);
      this.past_scroll_left = now_l;
    }
  };
  
  var events = ["scroll", "touchmove"];
  // var f = this.dispatch_callback;
  events.forEach(function(ev, idx, arr){
    ele.addEventListener(ev, this.dispatch_callback.bind(this), {capture:true, passive:true});
  }.bind(this));
 }

var evX = new createEventScrollX(target);
target.addEventListener("scroll-x", function(ev){
  console.log("scroll-x");
  console.log(ev.currentTarget);
  var l = ev.currentTarget.scrollLeft;
  
  var p = document.createElement("p")
  p.innerHTML = "scroll-x:" + l;
  res.appendChild(p);
}, {capture:true, passive:true});