离子2-如何禁用滚动

Question

首先：我知道已经有一些主题，但是它们似乎都没有帮助我。

我尝试了所有可以找到的方法来禁用我的一个页面上的滚动，但是它们都没有起作用，所以我来这里寻求帮助。

我尝试的是：

• 创建一个隐藏溢出的CSS类（与attr.noscroll相同）
• setscrolldisabled
• 将DIV设置为离子固定
• 离子抗弹药
• :: - webkit-scrollbar
• Overflow-Scroll =" false"

---

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

当我向下滚动时，它在屏幕的底部有这个白色条

我只添加了一个背景图片，我将其宽度设置为100％和高度：自动（高度：100％产生相同的白色条）

供参考，如果有帮助，这是我的代码

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

Answer 1

无法取消滚动事件。但是您可以通过取消这些互动事件来做到这一点：鼠标＆amp;触摸滚动和与滚动相关的按钮。

http://output.jsbin.com/xatidu/4/＆lt; - 工作版本

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 2

要修复它，您应该了解导致它的原因，因此您可能需要read this。

---

在某些特殊情况下，您可以通过禁用滚动来隐藏该空白，但这实际上不是您应该如何解决此问题的方式。
取而代之的是，您应该删除空白。您可以通过应用

来做到这一点

display: block;

...或...

float: left;
width: 100%;
height: auto;

到您的<img>元素。

作为替代方案，您可以将标记更改为：

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