针对特定屏幕大小，防止智能手机滚动

Question

当某个事件发生时，我需要使用JS和/或JQuery在移动设备上防止滚动。我有一个图像，当用户打开图像时，滚动将被禁用，一旦关闭，滚动将再次启用。目标设备为：

• 从4s到最新型号（包括5 + 6）的任何iPhone

这里是我尝试过但没有成功的一些方法：

方法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;  
}

还有其他建议吗？

- Sanie.Y

Answer 1

我通过在应用于显示图片时的html和body上添加position: fixed;来解决了这个问题。

添加JS以禁用打开图像时的滚动：

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

新增了JS以便在关闭图片时启用滚动：

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

CSS：

.no-scroll {
    position: fixed;
}

希望这能帮助其他遇到类似问题的人。

- Sanie.Y

Answer 2

你可以使用CSS轻松禁用文档滚动：

$('body').addClass('overflow'); // use to disable scroll
//-
$('body').removeClass('overflow'); // use to enable scroll

还有CSS：（或使用jQuery .css()）

<style>
    .overflow {
        overflow: hidden;
    }
</style>

- Undefitied

---

不幸的是，这在设备上没有起作用，但在笔记本电脑上却很好，就像我之前提到的方法一样。还有其他建议吗？ - Ahmad Sanie

Answer 3

我使用类似这样的东西：

$.fn.isolatedScroll = ->
    @on 'mousewheel DOMMouseScroll', (e) ->
      delta = e.wheelDelta or e.originalEvent and e.originalEvent.wheelDelta or -e.detail
      bottomOverflow = @scrollTop + $(@).outerHeight() - (@scrollHeight) >= 0
      topOverflow = @scrollTop <= 0
      if delta < 0 and bottomOverflow or delta > 0 and topOverflow then e.preventDefault()

我使用它，例如：$(@).find('ul').isolatedScroll()

- Darex1991