Ionic 2 - How do I disable scrolling

Question

First of all: I know there are some topics about this already, but none of them seem to help me.

I tried all methods I could find to disable scrolling on one of my pages, but none of them work and so I come to seek help here.

What I tried:

• Creating a css class which hides overflow (same with attr.noScroll)
• setScrollDisabled
• set a div as ion-fixed
• ion-content no-bounce
• ::-webkit-scrollbar
• overflow-scroll="false"

---

This is what my page looks like ...

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

I only added a background picture whose width I set to 100% and height:auto (height: 100% produces the same white bar)

For reference, here is my code if it helps

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

Answer 1

To fix it, you should understand what's causing it, so you probably want to read this.

---

In some special cases, you might be able to hide that white space by disabling scrolling, but that's really not how you should approach this issue.
Instead, you should just remove the white space. You can do it by applying

display: block;

... or ...

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

to your <img> element.

As an alternative, you can change your markup to:

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

Answer 2

The scroll event cannot be canceled. But you can do it by canceling these interaction events: Mouse & Touch scroll and Buttons associated with scrolling.

http://output.jsbin.com/xatidu/4/ <-- Working version

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