javascript - Ionic 2 - 如何禁用滚动

Question

首先:我知道已经有一些关于此的主题，但似乎没有一个对我有帮助。

我尝试了我能找到的所有方法来禁用我的一个页面上的滚动，但没有一个有效，所以我来这里寻求帮助。

我尝试过的:

• 创建一个 overflow hidden 的 css 类(与 attr.noScroll 相同)
• 设置滚动禁用
• 将一个 div 设置为 ionic 固定
• ionic 内容无弹跳
• ::-webkit-滚动条
• 溢出滚动=“假”

---

这是我的页面的样子......

It has this white bar on the bottom of the screen when I scroll down

我只添加了一张背景图片，其宽度设置为 100% 和高度:自动(高度:100% 产生相同的白条)

作为引用，如果有帮助，这是我的代码

<ion-content>
  <img class="bgc" src="assets/background.png">
</ion-content>

Answer 1

无法取消滚动事件。但是你可以通过取消这些交互事件来做到这一点: 鼠标和触摸滚动以及与滚动相关的按钮。

http://output.jsbin.com/xatidu/4/ <-- 工作版本

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