Question

85

Prevent iOS bounce without disabling scroll ability

rated 0 times [ 86] [ 1] / answers: 1 / hits: 82029 / 9 Years ago, mon, april 27, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

pranav

Add To Favorites

Follow

Total Points: 693

Total Questions: 119

Total Answers: 119

Location: Greenland

Member since Fri, Jul 31, 2020

4 Years ago

pranav questions

1 Angular - Mat Paginator : Multiple Tables in a component

Thu, Feb 10, 22, 00:00, 2 Years ago

1 how to push objects into array in ReactJS

Tue, Dec 28, 21, 00:00, 2 Years ago

1 How to get values when include antd Table in Form.Item?

Mon, Sep 6, 21, 00:00, 3 Years ago

1 What is the difference between async/await forEach and Promise.all + map

Thu, Jun 17, 21, 00:00, 3 Years ago

1 Vue 3 Event Bus with Composition API

Mon, Mar 8, 21, 00:00, 3 Years ago

View All

answered 9 Years ago jacquezf · Accepted Answer

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;

}