javascript - Prevent iOS bounce without disabling scroll ability

Question

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.

Answer 1

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;
}