Horizontal scrolling via drag and mousewheel with custom scrollbar

Horizontal scrolling via drag and mousewheel with custom scrollbar

/*
Plugins
Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
jQuery Mouse Wheel: https://github.com/jquery/jquery-mousewheel
*/

var drag = $('.js-drag')
var ps = new PerfectScrollbar('.js-drag');

drag.mousewheel(function(event, delta) {
  this.scrollLeft -= (delta * 50);
  this.scrollRight -= (delta * 50);
  event.preventDefault();
});

var slider = document.querySelector('.drag');
var isDown = false;
var startX;
var scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
  isDown = false;
});
slider.addEventListener('mouseup', () => {
  isDown = false;
});
slider.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  var x = e.pageX - slider.offsetLeft;
  var walk = (x - startX) * 3; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
});