临时替代滚动Javascript

Question

快速版本：

使用Javascript，如何暂时禁用滚动功能，但仍从wheel获取值，因此可以触发if语句？

上下文：

我正在将复活节彩蛋添加到一个网站，该网站的工作方式如下：

首先，存在一个固定元素，该元素被可滚动元素部分覆盖。当您正常向下滚动页面时，一切都会按预期运行-可滚动元素将滚动到固定元素上。

Initial state

这是复活节彩蛋：如果您位于页面顶部，则当您向上滚动时，我让JS向可滚动元素中添加了一个类，从而为其提供了更大的顶部空白，因此可滚动元素向下滑动，显示了在先前隐藏的固定元素上的小复活节彩蛋。

effect

到目前为止，我有什么：

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");
	};

 	
};

此代码实现了以下基础知识：如果您位于页面顶部并向上滚动，则会触发CSS动画，而如果您向下滚动，则其动画返回初始状态。

尽管如此，我还是想解决一个困扰的问题。

我被困在哪里

此行为的问题在于，当您向上滚动显示复活节彩蛋时，它既隐藏了复活节彩蛋，又向下滚动了页面。这是一个问题，因为它使用户不得不滚动到顶部才能再次触发复活节彩蛋，这感觉很麻烦。

这就是我想要的：当参与'reveal'类时，我想完全禁用页面滚动，并让滚轮输入仅触发隐藏复活节彩蛋的css动画，以便滚动位置保持在页面顶部。删除“展示”课程后，我想像往常一样重新参与滚动。

我已经花了点时间使用这个：

window.onwheel = preventDefault;


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

但是当我这样做时，似乎阻止了deltaY获得任何值，因此我无法触发条件来再次隐藏复活节彩蛋。

有什么想法吗？

Answer 1

您可能要检查How to disable scrolling temporarily?。 ....

  

我无法评论，因此答案部分中的链接