CODEWITHSUNDEEP
ioscsshtmlcordova
Dancer
Dancer

Reputation: 17651

Create a scrolling Div within HTML5 phonegap IOS app - without height

Is is possible to create a scrolling div within a html5 IOS app where the height needs to be dynamic?

To give a bit of background to my headache - our app has 3 main panels - the user can left or right swipe to reveal the first and third panel which contain notifications/settings (as in the Facebook app. All 3 outer panels are fixed position.

The main panel contains 6 pages - which are all absolutely positioned divs which hide and show via menu selection. Each revealed div (or page) needs to scroll, but all content is dynamic - so I cant set a height.

I have found several solutions for fixed heights - but none so far for dynamic heights..

Any suggestions?

Upvotes: 3

Views: 18495

Answers (2)

Varun Agarwal
Varun Agarwal

Reputation: 309

Please see this Link

iScroll is a party lib which help in good scrolling.

It has a scrolling without providing height. We just have to call a method refresh when dom elements of scrolling are added.

Upvotes: 0

Mayur Birari
Mayur Birari

Reputation: 5835

Scrolling Divs

Another new feature in iOS 5+ is divs can finally scroll. To make a div scroll you’ll just need to add the following (this example has a fixed header but adjust the positioning to fit your app):

.scrollable {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

The trick here is adding the -webkit-overflow-scrolling to anywhere you’d normally set your overflow. The downside of Apple’s implementation is that the div doesn’t bounce as you’d hope when you are already at the absolute top or bottom. Instead of bouncing the div being scrolled, it bounces the whole page and reveals the browser chrome. This is where you’ll need a javascript fix.

Please try this example for Scrollability.

Upvotes: 10

Related Questions