Temporarily Override Scrolling Javascript

Question

Quick version:

Using Javascript, how do I temporarily disable scrolling, but still get the values from wheel, so I can trigger an if statement?

Context:

I'm adding an easter egg into a website that should work as follows:

First, there is a fixed element that is partially overlayed by a scrollable element. When you scroll down the page normally, everything behaves as you'd expect--the scrollable element rolls over the fixed element.

Initial state

Here's the easter egg: If you are at the top of the page, when you scroll up, I have JS adding a class to the scrollable element which gives it a larger top margin, so the scrollable element slides down, revealing the little easter egg on the fixed element that had been previously hidden.

effect

What I've got so far:

window.onwheel = function() {reveal()}; 

function reveal() {

 var y = event.deltaY;

 var scrollPosition = document.body.scrollTop;

 if ( scrollPosition <= 0 && y < 0 ) {

  document.getElementById("scrolling-area").className = "reveal";

 }; 

 if ( y > 0 ) {

  document.getElementById("scrolling-area").classList.remove("reveal");
 };

  
};

This code achieves the basics: If you are at the top of the page and scroll up, it triggers the CSS animation, and if you scroll down, it animates back into its initial state.

There is one nagging issue that I'd like to polish up though.

Where I'm stuck

The problem with this behavior is that when the easter egg is revealed when you scroll up, it both hides the easter egg and scrolls down the page. This is a problem, because it makes it so the user has to scroll back to the top to trigger the easter egg again, which feels buggy.

Here's what I want: When the 'reveal' class is engaged, I want to totally disable the page from scrolling, and have the wheel input only trigger the css animation hidding the easter egg, so that the scroll position remains at the very top of the page. Once the 'reveal' class is removed, I want to reengage scrolling as normal.

I've spent time using this:

window.onwheel = preventDefault;


function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
};

But when I do that, it seems to stop deltaY from getting any values, so I can't trigger the condition to hide the easter egg again.

Any ideas?

Answer 1

You might want to check How to disable scrolling temporarily?. ....

I can't comment hence the link in answers sections