wheel Event Reliability

Question

I'm working on a web project that has animations and page changes on the scroll ( specifically, scroll direction ) and I've been looking for multiple possible good and reliable solutions.

I've been detecting the scroll direction by detected the window's scrollY with the user's previously saved scrollY that I have saved in a variable. The only problem is that the scroll event doesn't fire when at the top or the bottom of page, even though the content is all absolute/fixed positioned.

I want to turn to the wheel event because of its deltaY values from the event, and it still fires when at the top of bottom of the page so I can remove the scrollbar and keep the body of the page 100vh.

The Mozilla dev docs say:

Don't confuse the wheel event with the scroll event. The default action of a wheel event is implementation-specific, and doesn't necessarily dispatch a scroll event. Even when it does, the delta* values in the wheel event don't necessarily reflect the content's scrolling direction. Therefore, do not rely on the wheel event's delta* properties to get the scrolling direction. Instead, detect value changes of scrollLeft and scrollTop of the target in the scroll event. (https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event)

And I'm also curious if the wheel event will work correctly on mobile with touch?

Here's a good example of what I'm trying to replicate: https://reed.be There is no scrollbar, yet things still happen based on your scrolling.

CanIuse shows full compatibility of the wheel event with modern browsers, and some older versions.

see here -> https://caniuse.com/#feat=mdn-api_wheelevent

I've found a solution that references the wheel event (How to determine scroll direction without actually scrolling), though my question still applies -

How reliable is the wheel event across devices and browsers, including mobile?

I am limited to my own current version browsers and android devices for testing.

Answer 1

You can fool the browser by setting the additional height on the body to match the content width and setting the overflow to scroll. Then use some basic script, to set the scrollLeft property of your container to equal the window scrollY.

You will need to set the height of the body equal to the total width of the panels.

body {
   height: 400vh; // 4 panels of 100vw each
   ...
}

.panel {
   width: 100vw;
   ...
}

JS

const viewPort = document.querySelector('#viewport');

let lastScroll = 0;
window.addEventListener('scroll', (e) => {
  let scrollY = window.scrollY;

  // scroll the container by and equal amount of your window scroll
  viewPort.scrollLeft = scrollY;

  lastScroll = scrollY;
});

Rough JSFiddle Demo