Ionic 2 - 如何禁用滾動

Question

首先：我知道有一些關於這方面的話題，但它們似乎都沒有幫助我。

我嘗試了所有可以在我的某個頁面上禁用滾動的方法，但是沒有一個能夠工作，所以我來這里尋求幫助。

我嘗試了什么：

• 創建一個隱藏溢出的css類（與attr.noScroll相同）
• setScrollDisabled
• 將div設置為離子固定
• 離子含量無反彈
• :: - WebKit的滾動條
• 溢出渦卷=“假”

---

這就是我的頁面看起來像......

當我向下滾動時，它在屏幕底部有這個白色條

我只添加了一個背景圖片，其寬度我設置為100％，高度：auto（高度：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;  
}

Answer 2

要修復它，你應該明白是什么導致它，所以你可能想要read this 。

---

在某些特殊情況下，您可以通過禁用滾動來隱藏該空白區域，但這不是您應該如何處理此問題。
相反，您應該刪除空白區域。 你可以通過申請來做到這一點

display: block;

... 要么 ...

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

到你的<img>元素。

作為替代方案，您可以將標記更改為：

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