RemoveEventListener doesn't work with MatchMedia

Question

I want to add horizontal scrolling to a page on larger screens. On smaller screens it should be regular, vertical scrolling. Like this website: https://www.studiorhe.com/

function horizontalScroll(elem) {

  let scrolly = (e) => {
    e.preventDefault();
    elem.scrollLeft += e.deltaY;
  }

  elem.addEventListener('wheel', scrolly, true); //Also tried this without the last parameter
  
}

I want this to happen on larger screens and not on smaller ones. I managed to make it work so if you resize the screen to a larger screen, it works, but not if you resize it down. The event is still there.

I have tried adding a parameter, didn't work:

function horizontalScroll(elem, status) {

  let scrolly = (e) => {
    e.preventDefault();
    elem.scrollLeft += e.deltaY;
  }

  if (status === false) {
    elem.removeEventListener('wheel', scrolly, true);   
  } else {
    elem.addEventListener('wheel', scrolly, true);
  }
}

Here's the function that I use to call horizontalScroll:

const mq = '(min-width:768px)';
const mql = window.matchMedia(mq);

const scrollContainer = this.$refs.wrapper;

if (mql.matches) {
  this.horizontalScroll(scrollContainer, true);
}

mql.addEventListener('change', () => {

  if (mql.matches) {
    this.horizontalScroll(scrollContainer, );
  } else {
    this.horizontalScroll(scrollContainer, false);
  }

});

The thing is if I add console.log(), they appear where I want to. So the logic is correct somehow. But I can't remove the event!

How do I remove the event listener? Or is there any other way to approach this to achieve the same effect?

RemoveEventListener doesn't work with MatchMedia

0 Answers0