Skip to Content (Press Enter)
2018-11-09 09-14-06
Gonçalo Almeida
681Views
6Comments
Re : Mobile and Scroll
Question
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?
0
0
14 Jan 2013
Copy Link
2019-11-12 17-31-26
Justin James
 
MVP
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
0
0
14 Jan 2013
Copy Link
2018-11-09 09-14-06
Gonçalo Almeida
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.
0
0
14 Jan 2013
Copy Link
2019-11-12 17-31-26
Justin James
 
MVP
Goncalo -

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

J.Ja
0
0
14 Jan 2013
Copy Link
UserImage.jpg
Davide Marquês
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!
0
0
15 Jan 2013
Copy Link
2011-06-15 10-50-19
Miguel Ventura
Staff
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
1
0
15 Jan 2013
Copy Link
2019-01-21 13-11-00
Rafaela Santos de Paula

Hi Gonçalo,

There's an easier way: vou create the header container and the content container in this order (so the header is on the top). In the content container, you put the following CSS:

.ScrollableContainer {
   max-height: 250px; 
   overflow-y: scroll;
}

This way, the only thing that scrolls is the content, and the header stays on the top. Hope this can help!

Cheers,

Rafaela

0
0
22 Mar 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.