CODEWITHSUNDEEP
htmlioscssiphoneipad
P. Frank
P. Frank

Reputation: 5745

Safari - IPAD - Disable bounce (no scroll) without -webkit-overflow-scrolling

First i have tested a lot of solution in the web but all solution never work.

I have a webpage with an Iframe and inside this, one div with overflow:hidden and one div with overflow:scroll.

When i want scroll into the div contain in the Iframe, the bounce broken all. The bounce appear after each scroll and the content appear little by little.

I want disable bounce but not the scroll. And i dont want use -webkit-overflow-scrolling. because after apply -webkit-overflow-scrolling, all the overflow in my page is overflow:auto and is it no good way for me.

I have try this solution but it's no good and disabled scrolling:

var xStart, yStart = 0;

document.addEventListener('touchstart',function(e) {
    xStart = e.touches[0].screenX;
    yStart = e.touches[0].screenY;
});

document.addEventListener('touchmove',function(e) {
    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    var yMovement = Math.abs(e.touches[0].screenY - yStart);
    if((yMovement * 3) > xMovement) {
        e.preventDefault();
    }
});

You can view exaclty what i say, please see my page : http://cipa.ch/forStack/

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<meta name="viewport" content="width=640">
	</head>
	<body  style="margin:0;padding:0;">
		<iframe frameborder="0" height="100%" width="100%" style="margin:0;padding:0;width:100%;height:90%;position:absolute" src="http://cipa.ch/forStack/test.html" >
		</iframe>
	</body>
</html>

Upvotes: 2

Views: 1546

Answers (1)

Ismail Farooq
Ismail Farooq

Reputation: 6827

try by adding position:fixed on body tag

body {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Upvotes: 1

Related Questions