防止在特定屏幕尺寸的智能手机上滚动

Question

当发生某个事件时,我只需要阻止使用JS和/或JQuery在移动设备上滚动.我有一个数字,当用户打开图形时,滚动将被禁用,一旦关闭,滚动将再次启用.目标设备是:

• 任何从4s到最新的iPhone(包括5 + 6)

以下是我尝试过但没有解决的一些问题:

方法1:

                    document.addEventListener('touchstart', this.touchstart);
                    document.addEventListener('touchmove', this.touchmove);

                    function touchstart(e) {
                        e.preventDefault()
                    }

                    function touchmove(e) {
                        e.preventDefault()
                    }

方法2:

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

还有其他建议吗？

Answer 1

我通过添加固定这position: fixed;对.no-scroll被施加到html并且body当所述数字是diplayed.

添加到JS以禁用打开图上的滚动:

$('html, body').toggleClass('no-scroll');

添加到JS以启用近距离滚动:

$('html, body').removeClass('no-scroll');

CSS:

.no-scroll {
    position: fixed;
}

希望这将有助于其他有类似问题的人.