32

On a mobile (Safari, webviews, wherever), overflow:scroll and overflow-scrolling: touch give a pretty smooth scroll, which is cool.

But, it makes the page "bounce" (area circled below), which is not the case when you are not using it, but which makes the experience a little less "native" (and more simply, as far as I can have an opinion about it, is absolutely un-useful)

Is there a way to prevent it to happen?

that kind of suxx

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Ben
  • 5,030
  • 6
  • 53
  • 94
  • That's part of Mobile Safari. Not much you can do about that. Possible Duplicate: http://stackoverflow.com/questions/5214348/stop-scrolling-over-edge-of-screen-on-ios-web-apps – Mooseman Mar 31 '13 at 17:46
  • Possible duplicate here too : http://stackoverflow.com/questions/12663576/prevent-scroll-bounce-for-the-body-element-but-keep-it-for-child-elements-in-io – Ben Mar 31 '13 at 17:55
  • But I guess there's a way – Ben Mar 31 '13 at 17:55

5 Answers5

22

There's a great blog post on this here:

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

Along with a demo here:

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

In summary, you can use the following on 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 I think you're describing is when you try to scroll up within a div that is already at the top - it then scrolls up the page instead of up the div and causes a bounce effect at the top of the page. I think your question is asking how to get rid of this?

In order to fix this, the author suggests that you use ScrollFix to auto increase the height of scrollable divs.

It's also worth noting that you can use the following to prevent the user from scrolling up e.g. in a 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 some issues with ScrollFix (e.g. when using form fields), but the issues list 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, are Scrollability and iScroll

Alasdair McLeay
  • 2,572
  • 4
  • 27
  • 50
  • The problem with using iScroll is that you are then not using native scrolling - which means that iScroll is much less performant. My solution is a pure CSS solution that has no JS dependencies. – romiem Oct 09 '13 at 10:40
  • sure it is better in pure css. but I could not manage to make it works . The kylejlarson does not really use iscroll; just a brief fix – Ben Oct 09 '13 at 12:08
  • anyway… this chrome thing should not be a problem. Hate apple on this one; even if it not such a big deal – Ben Oct 09 '13 at 12:09
11

I've managed to find a CSS workaround to preventing bouncing of the viewport. The key was to wrap the content in 3 divs with -webkit-touch-overflow:scroll applied to them. The final div should have a min-height of 101%. In addition, you should explicitly set fixed widths/heights on the body tag representing the size of your device. I've added a red background on the body to demonstrate that it is the content that is now bouncing and not the mobile safari viewport.

Source code below and here is a plunker (this has been tested on iOS7 GM too). http://embed.plnkr.co/NCOFoY/preview

If you intend to run this as a full-screen app on iPhone 5, modify 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 once the chrome of mobile safari has been taken into account).

<!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>
romiem
  • 8,360
  • 7
  • 29
  • 36
  • changing the 'css' a bit into `body { position: absolute; top: 0px; left: 0px; width: 640px; height: 100%; overflow: hidden; margin: 0; padding: 0; }` makes it device independent. – bart s Oct 28 '13 at 09:25
  • This didn't work for me when trying to prohibit scrolling on an object within a dedicated div on the page. I'm not sure if it's even possible. – cbmtrx Apr 09 '15 at 15:24
3

you could try

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

add this if necessary

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

note that everything is fixed except #div

Tarik L
  • 31
  • 1
  • 1
    Maybe this work better `code`$(document).bind("touchmove", function(e){ e.preventDefault(); }); $("#scrollable_div").on('touchmove', function (e) { e.stopPropagation(); });`code` – Tarik L Oct 30 '14 at 02:47
1

This answer seems quite outdated and not adapt for nowadays single page applications. In my case I found the solution thank to this aricle where a simple but effective solution is proposed:

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

This solution it's not applicable if your body is your scroll container.

Community
  • 1
  • 1
ggwzrd
  • 128
  • 10
0
body {
  position: fixed;
  height: 100%;
}
  • 2
    Although this code may answer the question, providing additional context regarding _why_ and/or _how_ it answers the question would significantly improve its long-term value. Please [edit] your answer to add some explanation. – Toby Speight Apr 22 '16 at 12:53