Mobile and Scroll

Mobile and Scroll

  
Hi all,

I was wondering if you can help me figure out how to create, in a mobile app, a screen with a scrollable body, without scolling the Title.
The screen has a Title, but when you scroll on iPhone, everything scrolls down, including the Title, but I want the title to NOT be scrollable.

Can you point me in the right direction?
Have you tried wrapping the content in a Container, and then setting the CSS of the container to show scrollbars if the content is too long?

J.Ja
Justin James wrote:
Have you tried wrapping the content in a Container, and then setting the CSS of the container to show scrollbars if the content is too long?

J.Ja
 
 
Hi Justin,

Yep, that was the first thing I tried.
But the iPhone native scroll functionality overlaps every other scroll. Even if I take all scrolling ability from the screen with "overflow:hidden" everywhere, the iPhone still lets me scroll the screen.
Goncalo -

That is some pretty bad behavior! Good to know about, though.

J.Ja
Hi guys,

You can disable the scroll on the iOS browser by binding to the touchmove event and stoping the event propagation.
This stack overflow question is a good starting point for understanding what's going on.

Hope that helps!
Gonçalo Almeida wrote:
screen with a scrollable body, without scolling the Title.
 
Hi Gonçalo,

As far as I understand, that's a very typical behavior on many sites: maintaining a fixed header zone while everything else is scrollable. This can be achieved through many ways.

The simpler would be setting the header part with a CSS style of position: fixed; top: 0; as this will make the header effectively fixed relative to the viewport, which means that scrolling should not have effect on its position. Now as you make the header fixed, it will be removed from the normal document flow, meaning that all the remaining content will slide underneath it, which is likely not what you want. However you can fix this behavior by giving your content a margin-top of the same height as the header's height.  We've used this approach while developing LifeTime, but AFAIK it has also been used in bootstrap and facebook.

Another approach may be laying out the page contents inside a container with overflow: auto;. Under this approach, the page would not be scrollable (there would be nothing to scroll) but the container's contents (containing the contents of the page) would be, so the visual effect would be very similar. Here the real challenge would be in making the overflowed container to fit the browser's screen. This is rather complex, thus making the previous alternative the number one choice.

Cheers,
Miguel