q42-cms-components/tools/vue-scroll-stop.js

Front-end package that provides a UI on top of the QMS back-end

// Allows only scrolling inside this element, prevents scrolling of any ancestor element
const VueScrollStop = {
  install: function(Vue) {
    Vue.directive('scroll-stop', {
      bind(el) {
        el.preventScroll = function(event) {
          var t = event.currentTarget;
          if (
            (t.scrollTop === 0 && event.deltaY < 0) ||
            (t.scrollTop === t.scrollHeight - t.offsetHeight && event.deltaY > 0) ||
            (t.scrollLeft === 0 && event.deltaX < 0) ||
            (t.scrollLeft === t.scrollWidth - t.offsetWidth && event.deltaX > 0)
          ) {
            event.preventDefault();
          }
        };
        el.addEventListener('mousewheel', el.preventScroll);
      },
      unbind(el) {
        el.removeEventListener('mousewheel', el.preventScroll);
      }
    });
  }
};

export default VueScrollStop;