28

I don't want the content of my site sloshing around when the user hits the edge of a page. I just want it to stop.

The omni-present javascript solution I see everywhere is this:

$(document).bind(
   'touchmove',
   function(e) {
     e.preventDefault();
   }
);

But this prevents scrolling entirely. Is there way to just remove the bounce. Preferably with CSS or a meta tag as opposed JS, but anything that works will do.

8 Answers 8

21

I have to add another answer. My first approach should work, but, there is an iOS bug, which still bumbs the whole page, even if e.stopPropagation.

mikeyUX find a workaround for this: https://stackoverflow.com/a/16898264/2978727 I wonder why he just get a few clicks for this great idea...

This is how I used his approach in my case:

var content = document.getElementById('scrollDiv');
content.addEventListener('touchstart', function(event) {
    this.allowUp = (this.scrollTop > 0);
    this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
    this.slideBeginY = event.pageY;
});

content.addEventListener('touchmove', function(event) {
    var up = (event.pageY > this.slideBeginY);
    var down = (event.pageY < this.slideBeginY);
    this.slideBeginY = event.pageY;
    if ((up && this.allowUp) || (down && this.allowDown)) {
        event.stopPropagation();
    }
    else {
        event.preventDefault();
    }
});
2
  • still not satisfied with the answer ?
    – Michael P
    Commented Dec 16, 2013 at 11:39
  • 1
    Missing ) on the last line ;) Also, didn't work for me , as my element is only visible when you click the modal - damn iOS :( Commented Nov 10, 2014 at 11:09
12

Disable bouncing by prevent the default behaviour of the document:

document.addEventListener("touchmove", function(event){
    event.preventDefault();
});

Allow scrolling by prevent that the touch reaches the document level (where you would prevent the scrolling):

var scrollingDiv = document.getElementById('scrollDiv');
scrollingDiv.addEventListener('touchmove', function(event){
    event.stopPropagation();
});

Mind the difference between these two:

event.stopPropagation()
event.preventDefault()

StopPropagation should be your choice here ! Here is a very good explanation: http://davidwalsh.name/javascript-events

Edit: Same problem, same solution: document.ontouchmove and scrolling on iOS 5

Edit2: fixed typo in variable names added brackets after methods

6
  • 1
    I tried making that switch and it doesn't seem to prevent the bounce. I'm on an iPhone5 with iOS6. Commented Dec 9, 2013 at 4:27
  • Thats right. Guess I misunderstood your question. I edited my post to show the full solution.
    – Michael P
    Commented Dec 9, 2013 at 13:56
  • 1
    I don't know much about event propagation in iOS, so it's not obvious to me what the final code should be from your answer. Do you mind clarifying what the final code snippet should look like to accomplish what I'm trying to do? Commented Dec 9, 2013 at 14:00
  • There is nothing more. Replace 'scrollDiv' with your div-ID you want to be able to scroll and call the lines in the first two boxes above in a '$(document).ready' function, or whereever you want after the site has been loaded.
    – Michael P
    Commented Dec 9, 2013 at 15:11
  • 1
    I tried this, but it did not prevent bouncing on iPhone5s - I did find a way using gregsramblings.com/2012/05/23/… and then adding swipe detect to make a scroll - however the scroll effect was soo poor, so I decided to just live with the bounce
    – serup
    Commented Oct 8, 2014 at 17:35
8

If apply to Desktop Browser, don't need any JavaScript codes, just few lines of CSS codes:

html {
    height  : 100%;
    overflow: hidden;
}
body {
    height  : 100%;
    overflow: auto;
}
2
  • This stops the bounce effect in Android Chrome too. Commented Mar 3, 2017 at 7:14
  • This stops the bounce effect on my iOS Chrome browser but I lose the smooth scrolling "flick" effect. The scrolling becomes quite choppy and doesn't decelerate towards a stop.
    – Sgnl
    Commented Jun 27, 2017 at 22:49
6

iOS 16 started support of css overscroll-behavior. If you are targeting > iOS 16 devices (including its WKWebview), to prevent overscroll bounce, the solution is simple

add following CSS

html {
  overscroll-behavior: none;
}

Tested in iOS 16 and above.

1
  • Working also in iOS PWA application
    – Dendy
    Commented Dec 20, 2023 at 22:35
5

I tried lots of different approaches I found here on stackoverflow, but iNoBounce was the thing that really worked for me: https://github.com/lazd/iNoBounce

I just included it in my index.html:

<script src="inobounce.js"></script>
4
  • 2
    But there ins't anything else to do.. :| It solved the question's problem which was exactly like mine.
    – Lesh_M
    Commented Dec 31, 2015 at 11:30
  • If that is the case then you are all set. I did not downvote or flag it.
    – Drew
    Commented Dec 31, 2015 at 11:32
  • It's not removing completely the bounce effect but it's doing really good job :) Commented Nov 4, 2016 at 13:28
  • I did this to make it work properly I applied it to a wrapper div which has all the content in
    – Joss Bird
    Commented Feb 27, 2020 at 16:45
3

This library is solution for my scenarios. Easy way to use just include library and initialize where you want like these;

noBounce.init({   
    animate: true
});

If you want to prevent bouncing only on one element and not on the whole page you can do it like:

 noBounce.init({
    animate: true,
    element: document.getElementById("content")
  }); 
1
  • 1
    This disables all scrolling... so kind of useless? but maybe I didn't use it right...
    – Skeets
    Commented Oct 12, 2017 at 4:28
0

Found a code that worked to me, I believe it will work to you.

The solution is written here: http://apdevblog.com/optimizing-webkit-overflow-scrolling/

Basically, you need to have this js code:

    document.addEventListener("DOMContentLoaded", ready, false);
    document.addEventListener("touchmove", function (evt)
    {
        evt.preventDefault();
    }, false);

    function ready()
    {
        var container = document.getElementsByClassName("scrollable")[0];
        var subcontainer = container.children[0];
        var subsubcontainer = container.children[0].children[0];

        container.addEventListener("touchmove", function (evt)
        {
            if (subsubcontainer.getBoundingClientRect().height > subcontainer.getBoundingClientRect().height)
            {
                evt.stopPropagation();
            }
        }, false);
    }

And then, have your scrollable divs with the class="scrollable".

0
0

After trying these suggestions and reading several articles, the fix for me was to use the CSS property < overflow-x: hidden; > on the problematic element/container.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.