Best IT Recipes

Mobile device overflow: scroll scrolling and overflow: tap // prevent the viewport from “bouncing”,

On a mobile device (safari, web browsing, anywhere), overflow:scroll and overflow-scrolling: touch give a pretty smooth scroll that is cool.

But this makes the page “bounce” (the area circled below), which is not the case when you are not using it, but which makes this experience a little less “native” (or simply put, as far as I can have an opinion about it, it’s absolutely not used )

Is there any way to prevent this? Thanks so much for your help / tips / answers

that kind of suxx

+25
mobile-safari overflow viewport
Mar 31 '13 at 17:44
source share
5 answers

I managed to find a CSS workaround to prevent the viewport from skipping. The key was to wrap the content in 3 divs with -webkit-touch-overflow: the scroll applied to them. The final div must have a minimum height of 101%. In addition, you must explicitly set a fixed width / height for the body tag representing the size of your device. I added a red background on the body to demonstrate that this is the content that is now bouncing, not the mobile safari viewport.

The source code below and here is plunker (this has been tested on iOS7 GM as well). http://embed.plnkr.co/NCOFoY/preview

If you intend to run this as a full-screen application on iPhone 5, change the height to 1136px (when Apple-mobile-web-app-status-bar-style is set to black-translucent or 1096px when set to black). 920x is the height of the viewport when considering the chrome of a mobile safari).

 <!doctype html> <html> <head> <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no" /> <style> body { width: 640px; height: 920px; overflow: hidden; margin: 0; padding: 0; background: red; } .no-bounce { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .no-bounce > div { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .no-bounce > div > div { width: 100%; min-height: 101%; font-size: 30px; } p { display: block; height: 50px; } </style> </head> <body> <div class="no-bounce"> <div> <div> <h1>Some title</h1> <p>item 1</p> <p>item 2</p> <p>item 3</p> <p>item 4</p> <p>item 5</p> <p>item 6</p> <p>item 7</p> <p>item 8</p> <p>item 9</p> <p>item 10</p> <p>item 11</p> <p>item 12</p> <p>item 13</p> <p>item 14</p> <p>item 15</p> <p>item 16</p> <p>item 17</p> <p>item 18</p> <p>item 19</p> <p>item 20</p> </div> </div> </div> </body> </html>
+8
Sep 16 '13 at 12:07 on
source share

There is a wonderful blog entry:

http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

Along with the demo here:

http://www.kylejlarson.com/files/iosdemo/

In conclusion, you can use the following in a div containing your main content:

 .scrollable { position: absolute; top: 50px; left: 0; right: 0; bottom: 0; overflow: scroll; -webkit-overflow-scrolling: touch; }

The problem that I think you are describing is when you try to scroll up to a div that is already at the top, then it scrolls the page instead of the div and causes a bounce effect at the top of the page. I think your question asks how to get rid of this?

To fix this, the author suggests you use ScrollFix to automatically increase the height of scrollable divs.

It's also worth noting that you can use the following to prevent the user from scrolling, for example. in the navigation element:

 document.addEventListener('touchmove', function(event) { if(event.target.parentNode.className.indexOf('noBounce') != -1 || event.target.className.indexOf('noBounce') != -1 ) { event.preventDefault(); } }, false);

Unfortunately, there are still problems with ScrollFix (for example, when using form fields), but the list of problems on ScrollFix is ​​a good place to look for alternatives. Some alternative approaches are discussed in this issue .

Other alternatives also mentioned in the blog post, Scrollability and iScroll

+19
Sep 20 '13 at 15:36
source share

you can try

 $('*').not('#div').bind('touchmove', false);

add this if necessary

 $('#div').bind('touchmove');

Please note that everything is fixed except #div

+1
Oct 24 '14 at 23:46
source share
 body { position: fixed; height: 100%; }
0
Apr 20 '16 at 13:25
source share

This answer seems outdated and is not suitable for modern single-page applications. In my case, I found a solution thanks to this article, which offers a simple but effective solution:

 html, body { position: fixed; overflow: hidden; }

This solution does not apply if your body is your scroll container.

0
Apr. 17 '19 at 15:54
source share


More articles:


All Articles