Prevent iOS bounce without disabling scroll ability

overscroll-behavior
webkit-overflow-scrolling
ios safari prevent scroll
disable touch scroll css
jquery scroll bounce effect
ipad overflow:scroll not working
scroll bar bounces back
ios safari prevent horizontal scroll

I am trying to implement a solution to prevent the iOS bounce effect in Safari for iOS when a web page content is larger than the viewport.

The page I am working on is quite specific in it's structure, and is very similar to this page http://new.salt.ch/

  • The basic structure is bootstrap-based.
  • It has a fixed navbar at the top.
  • It has a full-screen background slideshow.
  • The slideshow has an overlay that is fixed to the bottom of the viewport.
  • There is a footer element that loads off-canvas and is only visible on scrolling the content.
  • The content scrolls behind the navbar.
  • The content consistes of a title which is positioned 20px below the navbar and a series of buttons that are positioned 20px above the viewport.
  • When scrolling, the buttons and title all move up the screen to display the footer.

The problem I am having is the same as the problem on the page http://new.salt.ch/ in that when you scroll up, you get a bounce effect at the bottom of the screen and which reveals the background and overlay.

I have tried various solutions, including iNoBounce.js, Nonbounce.js and a few other suggestions I have found on SO.

I have the same issue always...when I try to disable the bounce, all scrolling gets disabled. I am guessing this is because the content (other than the footer) is always just large enough that the scroll is not needed, and so scrolling gets disabled and the footer no longer is accessible on scroll.

This code should stop the bounce as it's the HTML tag that bounces

html {
    height  : 100%;
    overflow: hidden;
    position: relative;
}
body {
    height  : 100%;
    overflow: auto;
    position: relative;
}

Disable bounce and rubber band scroll in Safari and iOS, My project share link How do I disable scroll and pull bouncing and rubber but it only worked for me in Chrome on Desktop but not in Safari. Bram.us, with bounce scroll. Sometimes – in fullscreen apps for example – you’ll want to disable this. Now, there’s no need to resort to JavaScript and hijack touchstart, as the little CSS snippet below can prevent the rubber band scrolling: html, body { position: fixed; overflow: hidden; } Tested with iOS8, iOS9, and iOS10.

I went through a few answers on SO and things were looking bleak until stumbled upon this code.

html {
  position: fixed;
  height: 100%;
  overflow: hidden;
}

body {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

The style declarations for body can be put on any element that you want to have the ability to scroll. You can also alter overflow-x and overflow-y as needed. I personally needed it to NOT scroll to the sides so I declared it as so.

update Sept 15 2017: I had to use this fix for another project and I was able to do without these declarations position: fixed and height: 100%; on the html selector. YMMV

Update April 12 2018 (mentioned in comments): If you're using fixed elements on the page, those elements may have a visual "shakiness" when scrolling.

Prevent overscroll/bounce in iOS MobileSafari and Chrome (CSS , Sometimes – in fullscreen apps for example – you'll want to disable this to retain scrolling on your page (but now without the overscroll effect)  On iOS, if you call scrollToIndex function while scrolling is in progress, the result will not be the expected one. This happens because of the iOS's default bounce / elastic scroll. This happens because of the iOS's default bounce / elastic scroll.

If I'm interpreting your question correctly, we've been having the same issue for years developing cross-platform mobile web apps, trying to get all the different proprietary scroll features to work correctly on each device: Apple iOS, Google Android, Windows Phone, laptop Chrome, laptop Safari, IE, and laptop Edge.

jQuery Mobile continues to try and fix this within the confines of their framework, but it's too much whack-a-mole, with the constant updates from each device maker / OS maker.

Yes, we've got solutions for each individual mobile device. And we have tested, but not seriously considered developing device-selective paging frameworks for each device, requiring us to detect each device and present a slightly different framework for each. Insanely bad idea with basically maintaining at least 3 and really up to a dozen different versions of your code.

SOLUTION: We've had the most luck by just putting your persistent header and footer on top of your page framework. Here is the general solution using in-line styles for simplicity:

<html>
<head>
  <title>Fixed Header and Footer on All Mobile Web Apps</title>
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
  <style>
    html, body { height:100%; width:100%; }
  </style>
</head>
<body>
<div style="position: fixed; height:100%; width:100%; top:0; left:0;">
  <div style="height:calc(100% - 1px); width:100%; margin-top: 60px; z-index: 1; overflow-y: scroll; -webkit-overflow-scrolling: touch;">
    [Body Content That Can Scroll if it extends beyond screen...]

  </div>
  <div style="position: absolute; top:0; left:0; width:100%; height: 60px; background:#dddddd; z-index:10;">
    [Header Content...]

  </div>
  <div style="position: absolute; bottom:0; left:0; width:100%; height: 40px; background:#cccccc; z-index:11;">
    [Footer Content...]

  </div>
</div>
</body>
</html>

So, the Body could be any jQuery Mobile set of pages. In fact, theoretically, the Body could be almost any content from any framework.

Special note, the line with height:calc(100% - 1px); is critical to the magic.

The seemingly infinite combinations or permutations of this issue have almost become a crusade for us over the years, trying to find the most pure, simplest, and most universally compatible solution. So after dedicating an embarrassing number of man-hours to this topic, this is not only our best solution, it's also the ONLY universally compatible approach we've found that also allows you to stick with just a singular code-base. It has been successfully tested on the latest versions of iOS, Windows Phone, Android, laptop Chrome, laptop Safari, PhoneGap, laptop Firefox, IE 9-11, and Windows Edge.

TAGS: mobile app, web app, fixed header, fixed footer, persistent header, persistent footer, scroll issue, iOS scroll bounce, Chrome scroll bounce, Android scroll bounce, webkit scroll issue, webkit touch scrolling, iOS touch scrolling issue

lazd/iNoBounce: Stop your iOS webapp from bouncing , Stop your iOS webapp from bouncing around when scrolling No dependencies , no configuration, just include iNoBounce. method if you explicitly disable it or want to enable it on a platform that doesn't support -webkit-overflow-scrolling . Prevent iOS bounce without disabling scroll ability. 0. How to prevent body scrolling but allow scroll content and stay footer on the bottom? 0.

I used iNoBounce https://github.com/lazd/iNoBounce and it works perfectly!

If you need to allow horizontal scrolling as well, there is a pull request by santi6291 at https://github.com/lazd/iNoBounce/pull/36 which fixes that

Disable "scroll-bounce" on Safari · Issue #943 · cdr/code-server , https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios- .com/ questions/7768269/ipad-safari-disable-scrolling-and-bounce-effect I'm not sure how code-server does it (not a developer of this project), but maybe  This way, you only prevent default when trying to scroll non-scrollable elements. You will still have a problem that at the top/bottom of the scrollable content starting a drag can cause the whole app to "bounce". To fix this problem, see Joe Lambert's ScrollFix.

None of these answers work in 2019 for iOS 13 mobile Safari.

Scroll Bouncing On Your Websites, This article describes the effect of scroll bouncing and how it works on different web browsers. suggested on the web that can be used to prevent scroll bouncing. What this means is that the footer was not supposed to move when and Safari on macOS and Windows 10, and Edge and Safari on iOS. Code to To remove ipad safari: disable scrolling, and bounce effect document.addEventListener("touchmove", function (e) { e.preventDefault(); }, { passive: false }); If you have canvas tag inside document, sometime it will affect the usability of object inside Canvas(example: movement of object); so add below code to fix it.

javascript, i have same issue alwayswhen try disable bounce, scrolling gets disabled. guessing because content (other footer) large enough scroll not needed, , scrolling  Whenever you scroll in applications like Safari and Mail and you reach the 'border' of the application, you get a little bounce effect like in iOS. I find this to be very annoying and I was wondering if there was a way to turn this off.

How to disable inertial scrolling on body for iOS browsers?, ios disable bounce scroll momentum-based scrolling ios safari scrolling issue overflow scroll not working on mobile. I need to disable the inertial scrolling on the body element for iPad, but keep the ability to scroll the page without the inertia. Coder already works surprisingly well on the iPad, however it is really annoying to scroll in the editor, because Safari applies the "end-of-page" effect to the whole application and moves it upwards.

BountyBot on Twitter: "CSS: Disable bounce effect for scroll on iOS , BountyBot · @BountyBot. I'm a robot that tweets new and interesting bounty questions from Stack Overflow. My maker is @lizardbill. View my  Is there a way to disable the bounce effect in a scrolling div? So far I have tried these things but none worked. Please help! How to disable vertical bounce/scroll on iPhone in a mobile web application. Can't disable bounce with UIScrollView and pagingEnabled=YES. ipad safari: disable scrolling, and bounce effect?

Comments
  • This fix seems to be outdated. bouncefix.js doesn't seem to work as well.
  • If you guys could put the version you are having issues with then it may help with the fix being updated.
  • any update on the issue? i tried the above code, it doesnt work on ios 9.3.5
  • works in ios12 with added position: relative to both
  • this worked for me. I had a slider with horizontal scroll that kept causing a slight bounce.
  • +1 for getting rid of a little vertical wobble that was happening with James Campbell's answer. -1 for non-semi-colons and non-CSS. :(
  • @EthanB your imagination must be broken! Enjoy the CSS and semi-colons.
  • Much obliged! :)
  • Working on an Angular 7 project. I was testing on an iPod (6. gen) and noticed that the pages was extremely elastic. When swiping from left to write. I could see previous pages behind the current. Not good. This fixed the problem. THANK YOU!!! :-D <3 This is the power of sharing. Saved me so much time.
  • thanks. I've been struggling with that for quite a while.
  • Thank you so much! This worked like a charm! I was using Inobounce and it was giving me such a headache when combining with different horizontal scrolling groups. With this solution the look and feel in my web app is like a real native app. And even without using javascript hacks... :D Cheers - take my upvote! :) Hint use calc(100% - 0.1px) to avoid actually seeing the 1px. (y)
  • Jeremy, I like that solution. Very simple. However I run into a problem with it. If the initial scroll position of the content is 0 and I drag DOWN the content there will be no (on ios) bounce effect and the whole scroll state is broken, I can not scroll down nor up. It works only if I initially scroll UP and THEN down. Don't you experience such a problem?
  • @AlexanderJorias I've the same problem. It seems that unfortunately, the header should have page's scrollbar on top of it. Which seems awkward for Cordova apps. :-/
  • @IvanBorisenko any solution yet? :)