暂时覆盖滚动Javascript

Question

快速版本：

使用Javascript，我如何暂时禁用滚动，但仍然从轮子获取值，以便我可以触发一个if语句？

上下文：

我在一个网站上添加了一个复活节彩蛋，如下所示：

首先，有一个固定的元素被滚动元素部分覆盖。当您正常地向下滚动页面时，所有的事情都会像您所期望的那样--滚动元素在固定的元素上滚动。

初始状态

下面是复活节彩蛋:如果您在页面的顶部，当您向上滚动时，我让JS向可滚动元素中添加一个类，这给它提供了一个更大的上边距，因此滚动元素向下滑动，显示了以前隐藏的固定元素上的小复活节彩蛋。

效果

到目前为止，我得到的是：

​

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动画，如果您向下滚动，它将返回到它的初始状态。

不过，有一个唠叨的问题，我想加以改进。

我被困在那里

这种行为的问题是，当你向上滚动复活节彩蛋时，它会隐藏复活节彩蛋并向下滚动。这是一个问题，因为它使它的用户必须回滚回顶部，以触发复活节彩蛋，这感觉错误。

下面是我想要的:当“显示”类被使用时，我希望完全禁用页面的滚动，并让轮子输入只触发隐藏复活节彩蛋的css动画，这样滚动的位置将保持在页面的最顶端。一旦“显示”类被删除，我想像往常一样重新启动滚动。

我花了很多时间用这个：

​

window.onwheel = preventDefault;


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

​

但是当我这样做时，它似乎阻止了deltaY获得任何值，所以我不能触发条件来再次隐藏复活节彩蛋。

有什么想法吗？

Answer 1

您可能需要检查如何暂时禁用滚动？。……

因此，我不能评论答案部分中的链接