Problem with 'unable to preventDefault (...) due to target being treated as passive' -- having problem implementing the solution

Question

I apologize for this not being exactly a 'code problem', but I have some faith in the programming community so I will ask anyway.

I keep on getting this error in dev tools whenever I scroll down: 'Unable to preventDefault inside passive event listener due to target being treated as passive.'

I know it is caused by an update in Google. The problem is that I see solutions out there but don't have the faintest idea on how to implement them.

(Note that I am not using jQuery).

Here is the piece of code that is using preventDefault:

   window.addEventListener("wheel", function(event) {
      viewStart = scrolled.scrollTop;
      if (!pageJump) {
        var pageHeight = page.scrollHeight;
        var pageStopPortion = pageHeight / 2;
        var viewHeight = window.innerHeight;

        var viewEnd = viewStart + viewHeight;
        var pageStartPart = viewEnd - pageStart;
        var pageEndPart = pageStart + pageHeight - viewStart;

        var canJumpDown = pageStartPart >= 0;
        var stopJumpDown = pageStartPart > pageStopPortion;

        var canJumpUp = pageEndPart >= 0;
        var stopJumpUp = pageEndPart > pageStopPortion;

        var scrollingForward = event.deltaY > 0;
        if (
          (scrollingForward && canJumpDown && !stopJumpDown) ||
          (!scrollingForward && canJumpUp && !stopJumpUp)
        ) {
          event.preventDefault();
          scrollToPage();
        }
        false; //
      } else {
        event.preventDefault();
      }
    });

Here is a suggested solution from stackoverlow: Unable to preventDefault inside passive event listener due to target being treated as passive - Chrome

I get that it is suggesting I add this code:

el.addEventListener('someEvent', someFn, { passive: false });

Can anyone guide me into how to 'add' it? So instead of the instances of:

event.preventDefault();

Should I use this code? :

window.addEventListener("wheel", function(event){
...all of the code except 'event.preventDefault()'...
}, {passive: false});

Or did I just mess up everything? Honestly any feedback would be really appreciated.

Answer 1

You do literally what it shows, except replace someFn with your event handler function:

window.addEventListener("wheel", function(event) {
   viewStart = scrolled.scrollTop;
   if (!pageJump) {
     var pageHeight = page.scrollHeight;
     var pageStopPortion = pageHeight / 2;
     var viewHeight = window.innerHeight;

     var viewEnd = viewStart + viewHeight;
     var pageStartPart = viewEnd - pageStart;
     var pageEndPart = pageStart + pageHeight - viewStart;

     var canJumpDown = pageStartPart >= 0;
     var stopJumpDown = pageStartPart > pageStopPortion;

     var canJumpUp = pageEndPart >= 0;
     var stopJumpUp = pageEndPart > pageStopPortion;

     var scrollingForward = event.deltaY > 0;
     if (
       (scrollingForward && canJumpDown && !stopJumpDown) ||
       (!scrollingForward && canJumpUp && !stopJumpUp)
     ) {
       event.preventDefault();
       scrollToPage();
     }
     false; //
   } else {
     event.preventDefault();
   }
 }, {passive: false});
//  ^^^^^^^^^^^^^^^^

---

Side note: The false; at the end of the first if block in that code doesn't do anything at all. Just remove it.