Make scroll and wheel events passive

[gemfarmer]

Make the wheel and scroll events passive to unburden the main thread.

I made this fix to address the issues that I'm seeing here: DOI-ONRR/doi-extractives-data#2111

18F/stickyfill has these changes and have significantly reduced lag we were previously seeing. 18F/stickyfill is also a web module, so to test that it is in fact an improvement, you can add it to your dependencies:

{
  "stickyfill": "github:18f/stickyfill"
}

And require it like webmodules/stickyfill allows: require('stickyfill')

[krzksz]

Just a heads up that you need to add feature detection for passive events support before applying it to the event listener. Older browsers that don't support it will understand third object argument as truthy capture option.
Here's the snippet you can use borrowed from Modernizr:

var passiveOption = undefined;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      passiveOption = { passive: true };
    }
  });
  window.addEventListener('test', null, opts);
} catch (e) {}
win.addEventListener('scroll', onScroll, passiveOption);
win.addEventListener('wheel', onWheel, passiveOption);

[gemfarmer]

@krzksz thanks for the input! I'll test it out on 18F/stickyfill and see if it helps with older browsers!

[kapouer]

Note two things:

• scroll/resize are passive by default on recent firefox/chrome. Don't know about edge.
• https://remysharp.com/2017/06/28/sticky-headers shows a simple way to debounce using requestAnimationFrame