Ios: Disable Bounce Scroll But Allow Normal Scrolling

Prevent iOS bounce without disabling scroll ability

This code should stop the bounce as it's the HTML tag that bounces

html {
    height  : 100%;
    overflow: hidden;
    position: relative;
}
body {
    height  : 100%;
    overflow: auto;
    position: relative;
}

iOS Safari - disable scroll / bounce but retain zoom

I managed to solve this issue by listening to some values on the touch event object, specifically changedTouches.length and scale.

First I set a global variable for zoomLevel at the top of the document var zoomLevel = 1

Next, I replaced evt.preventDefault() in iNoBounce with:

if(evt.changedTouches.length === 1 && zoomLevel <= 1){
    evt.preventDefault();
}
if(evt.changedTouches.length > 1){
    zoomLevel = evt.scale;
}

This looks at how many fingers are being used and if the page scale is not 100%, then acts accordingly.

Disable content bouncing scroll

You will need to set overflow-scroll to false like :

overflow-scroll="false"

Works on Ionic 1.3

---

Related Topics