CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Etan Ginsberg
Etan Ginsberg

Reputation: 55

Re-Enable Mouse Scroll in JavaScript

I've been tinkering with the following CodePen. It prevents the user from scrolling down the page, instead using the downward scroll to form a constellation animation. How would I allow the user to be able to scroll down the page after the constellation animation is complete? As it currently stands, scrolling is disabled irregardless of the state of the animation.

This is an excerpt of the code that I am struggling with.

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

Upvotes: 1

Views: 536

Answers (2)

ethancrist
ethancrist

Reputation: 114

Disable scrolling:

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

Enable scrolling:

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

Upvotes: 0

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23738

well that is something I won't recommend doing but here are the 2 changes you need to do 

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

and remove e.preventDefault(); from the function MouseWheelHandler(e) { you would need to add some more text in the body to see the scrolling.

Upvotes: 2

Related Questions