Disable Scrolling When Touch Moving Certain Element

Can't prevent `touchmove` from scrolling window on iOS

I recently ran into this same problem. You'll need to pass { passive: false } when registering the touchmove event listener. e.g.

document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });

This is because document touch event listeners are now passive by default in Safari 11.1, which is bundled with iOS 11.3. This change is documented in the Safari 11.1 release notes:

Web APIs


  • [...]
  • Updated root document touch event listeners to use passive mode improving scrolling performance and reducing crashes.

Ionic 2 - How do I disable scrolling

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>


Related Topics



Leave a reply



Submit