如何暂时禁用滚动?

我正在使用scrollTo jQuery插件,并想知道是否有可能通过Javascript临时禁用窗口元素的滚动功能? 我想禁用滚动的原因是,当scrollTo进行动画处理时,如果进行滚动,它会变得非常难看;)

当然,我可以做一个$("body").css("overflow", "hidden"); 然后在动画停止时将其恢复为自动,但如果滚动条仍然可见但处于非活动状态,则会更好。


scroll事件不能被取消。 但是你可以通过取消这些交互事件来做到这一点:
鼠标触摸滚动和与滚动关联的按钮

[工作演示]

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

简单地通过在人体中添加一个类来实现:

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

添加该类,然后在想要重新启用滚动时删除,并在IE,FF,Safari和Chrome中进行测试。

$('body').addClass('stop-scrolling')

对于移动设备 ,您需要处理touchmove事件:

$('body').bind('touchmove', function(e){e.preventDefault()})

并取消绑定以重新启用滚动。 测试iOS6和Android 2.3.3

$('body').unbind('touchmove')

这是一个非常基本的方法:

window.onscroll = function () { window.scrollTo(0, 0); };

这在IE6中有点令人费解。

链接地址: http://www.djcxy.com/p/49637.html

上一篇: How to disable scrolling temporarily?

下一篇: setInterval alternative