2

I'm trying to disable the bounce effect so that when you get to the end of a scrolling div, it will stop dead, no bounce at all. This works fine on the mac safari bout not in mobile safari.

So far I have this code, it does stop the bounce effect so that you no longer see the grey but all it's done is change the bounce to my background colour.

Can anyone help and please don't say it's a duplicate because i've gone through all the other questions and this is the best i've come up with so far. The code will need to be viewed on a mobile.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="cleartype" content="on">
<style type="text/css">
html, body {
            overflow:hidden;
            height:100%;
            width:100%;
        }
* {
border:0px;
margin:0px;
}
#page-wrapper {
width:100%;
height:100%;
}
#top {
background:red;
width:100%;
height:50%;
position:fixed;
z-index:1;
}
#bottom {
background:green;
width:100%;
height:50%;
position:fixed;
z-index:1;
}
#content-wrapper {
            box-sizing:border-box;
            height:100%;
            width:100%;
            overflow:scroll;
            -webkit-overflow-scrolling:touch;
            position:relative;
            z-index:2;
            background:pink;
        }
</style>
</head>

<body>
<div id="page-wrapper">
  <div id="top"></div>
  <div id="bottom"></div>
  <div id="content-wrapper" class="scrollable">
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>john</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>john</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>Test</h1>
        <h1>john</h1>
  </div>
</div>
<script>
document.body.addEventListener('touchmove',function(e){
 if(!$(e.target).hasClass("scrollable")) {
   e.preventDefault();
 }
 });
</script>
</body>
</html>
Dan
  • 1,565
  • 3
  • 23
  • 43
  • https://github.com/pinadesign/overscroll – Adam Marshall Jan 27 '14 at 10:57
  • Thanks, that works exactly as described, not tested it across platforms yet but so far so good. – Dan Jan 27 '14 at 11:25
  • There is one annoying issue that I raised on there, that was a dealbreaker for me, it seems to 'kill' any touch scrolls that start on a textarea element. I had quite a few large textarea boxes on my forms which made scrolling difficult. I couldn't be bothered to try and investigate this further, as I actually wanted the rubber band it was just happening on the wrong elements (e.g. rubber banding the fixed header). More info here: http://stackoverflow.com/questions/10357844/how-to-disable-rubber-band-in-ios-web-apps/12765599#comment31504823_12765599... Good luck :) – Adam Marshall Jan 27 '14 at 11:40
  • Thanks Adam. I've struggled on this for ages and it seems so simple yet no one has an answer for a perfect execution. – Dan Jan 27 '14 at 12:12
  • Gonna have to keep looking, doesn't quite work with my footer, as soon as i put fixed in the footer css it stops working. – Dan Jan 27 '14 at 15:19

1 Answers1

1

Android browsers below 2.3 does not support overflow:scroll property.

user2959428
  • 26
  • 1