Prevent scrolling until animation complete

Question

I am using this code to scroll:

if (window.addEventListener) {
    window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;

function wheel(event) {
    var delta = 0;
    if (event.wheelDelta) {
        (delta = event.wheelDelta / 120);
    } else if (event.detail) {
        (delta = -event.detail / 3);
    }

    handle(delta);
    if (event.preventDefault) {
        (event.preventDefault());
    }
    event.returnValue = false;
}

function handle(delta) {
    var time = 800;
    var distance = 300;

    $('html, body').stop().animate({
        scrollTop: $(window).scrollTop() - (distance * delta)
    }, time);
}

Everything's working fine but it's a bit annoying that little steps that appears when user is trying to scroll more than once.

I'm not able to use some custom scrollbar to avoid that problem as I'm using paroller to make same effects.

Is there any way to prevent user to scroll again until that animate ends?

Set `overflow-y: hidden` on your scrollable element before animation and restore to auto when it finished. — marekful, Aug 01 '18 at 12:25
@marekful Wow, it was that easy? It's much better now. Thanks. Btw, I'm new in SO. How can I mark your answer a helpful one ? — ptheodosiou, Aug 01 '18 at 12:36

Leo Odishvili · Accepted Answer · 2018-08-01T12:48:14.233

There are two ways. One is harder, but I think it's what you are seeking. The second answer is already in the comment
What I'm doing, is disabling keyboard events, mouse scroll and buttons which are associated with scrolling.
The minus of just removing overflow, is that scrollbar is just disappearing, which sometimes can be confusing for some users

// code from here https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

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

function preventDefaultForScrollKeys(e) {
    if (keys[e.keyCode]) {
        preventDefault(e);
        return false;
    }
}

function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

function enableScroll() {
    if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null;  
    document.onkeydown = null;  
}
// your code
function handle(delta) {
var time = 800;
var distance = 300;

$('html, body').stop().animate({
    scrollTop: $(window).scrollTop() - (distance * delta)
}, time,
start:function(){
    disableScroll();
},
complete:function(){
    enableScroll()
});

}

I don't know if i'm doing something wrong, but both ways have same result. I'll accept both for helpful answers. — ptheodosiou, Aug 01 '18 at 12:46

Prevent scrolling until animation complete

1 Answers1