Question

我正在使用以下代码进行滚动：

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

一切正常，但是当用户尝试滚动多次时，出现的小步骤有点令人讨厌。

我无法使用某些自定义滚动条来避免该问题，因为我正在使用paroller来产生相同的效果。

有没有办法阻止用户再次滚动直到动画结束？

Answer 1

有两种方法。一个比较难，但是我认为这就是您要寻找的。第二个答案已经在评论中
我正在做的是禁用键盘事件，鼠标滚动和与滚动相关的按钮。
消除溢出的缺点在于，滚动条只是消失了，有时会使某些用户感到困惑

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

}

防止滚动直到动画完成

1 个答案: