Question

我一直在修补以下CodePen。它可以防止用户向下滚动页面，而是使用向下滚动来形成星座动画。在星座动画完成后，如何让用户能够向下滚动页面？就目前情况而言，无论动画的状态如何，都会禁用滚动。

这是我正在努力解决的代码的摘录。

window.addEventListener("mousewheel", MouseWheelHandler, false);
window.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
function MouseWheelHandler(e) {

  var e = window.event || e; // old IE support
  var delta = Math.max(-30, Math.min(60, (e.wheelDelta || -e.detail)));

  if (delta > 0) {
    showFinal=false;
    for(var i = 0; i < stars.length; i++) {
      stars[i].reseting = true;
    }
  } else {
    showFinal=true;
  }
  for(var i = 0; i < stars.length; i++) {
    stars[i].move();
  }
  e.preventDefault();
}

window.addEventListener("keydown", keyDown, false);
function keyDown(e) {
  var keyCode = e.keyCode;

  if (keyCode==38) {
    //up
    showFinal = false;
    for(var i = 0; i < stars.length; i++) {
      stars[i].reseting = true;
    }
  } 

  if (keyCode==40) {
    //down
    showFinal = true;
  }

  for(var i = 0; i < stars.length; i++) {
    stars[i].move();
  }
  e.preventDefault();
}

Answer 1

这是我不会推荐的事情，但这里是您需要做的2项更改

#container {
    overflow:auto;
    position:relative;
}

并从e.preventDefault();移除function MouseWheelHandler(e) {，您需要在正文中添加更多文字以查看滚动。

Answer 2

禁用滚动：

$('#container').css('overflow', 'hidden');

启用滚动：

$('#container').css('overflow', 'scroll');

在JavaScript中重新启用鼠标滚动

2 个答案: