javascript - 如何暂时禁用滚动？(How to disable scrolling temporarily?)

Question

I'm using the scrollTo jQuery plugin and would like to know if it is somehow possible to temporarily disable scrolling on the window element through Javascript?

(我使用的是scrollTo jQuery插件，想知道是否可以通过Java临时禁用window元素上的滚动吗？)

The reason I'd like to disable scrolling is that when you scroll while scrollTo is animating, it gets really ugly ;)

(我要禁用滚动的原因是，当您在scrollTo设置动画时滚动时，它真的很难看;）)

Of course, I could do a $("body").css("overflow", "hidden");

(当然，我可以做一个$("body").css("overflow", "hidden");)

and then put it back to auto when the animation stops, but it would be better if the scrollbar was still visible but inactive.

(然后在动画停止时将其重新设置为自动，但是如果滚动条仍然可见但处于非活动状态会更好。)

  ask by Olivier Lalonde translate from so

Answer 1

The scroll event cannot be canceled.

(scroll事件无法取消。)

But you can do it by canceling these interaction events:

(但是您可以通过取消以下交互事件来做到这一点：)
Mouse & Touch scroll and Buttons associated with scrolling.

(鼠标 和 触摸滚动以及与滚动相关的按钮 。)

[ Working demo ] ([ 工作演示 ])

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
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);
  document.addEventListener('wheel', preventDefault, {passive: false}); // Disable scrolling in Chrome
  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);
    document.removeEventListener('wheel', preventDefault, {passive: false}); // Enable scrolling in Chrome
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null;  
    document.onkeydown = null;  
}

EDIT

(编辑)

Added document.addEventListener('wheel', preventDefault, {passive: false});

(添加了document.addEventListener('wheel', preventDefault, {passive: false});)

to ensure the function still works on Chrome.

(以确保该功能在Chrome上仍然有效。)