0

I'm trying to use this jQuery plugin to enable horizontal scrolling using the mouse wheel. I followed this short CSS-Tricks tutorial exactly. However, I'm getting this error when scrolling on the page:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

Here's the exact code used in my main.js:

$(function() {    
   $("body").mousewheel(function(event, delta) {    
      this.scrollLeft -= (delta * 30);        
      event.preventDefault();    
   });    
});

I just tested replacing $("body") with an exact div $("#mainContainer") and it works. I'm just wondering why it won't work with the body as it does in the tutorial?

Ryan Walls
  • 191
  • 1
  • 13
  • 1
    https://stackoverflow.com/questions/55548261/unable-to-preventdefault-inside-passive-event-listener-due-to-target-being-treat might be worth reading – ADyson Sep 06 '19 at 13:29
  • Can you show us your css and html? – tom Sep 06 '19 at 13:38

1 Answers1

-1

If you get this warning, it means that the browser sets the passive touchmove event for this object by default: true. At this time your preventDefault will not be executed and the page will not crash. So you can remove the preventDefault to eliminate the warning.

$(function() {
   $("body").mousewheel(function(event, delta) {
      this.scrollLeft -= (delta * 30);
   });
});
hellotim
  • 1