Advice on how to stop the tabbed bar and nav bar from floating

This is not solely a Framework7 problem but I am sure anyone who is attempting to create a mobile app is running into it … It also works correctly on Chrome on Android based on some early testing.

I have a top navbar and a tabbed (icon) bar at the bottom of my app. The middle of the screen is scrollable in most cases. I find that on screens where the scrollable region is not longer than the screen height that you can press and drag the navbar or tabbed bar and the entire browser window will move around. If the scrollable area is longer than the screen height then you cannot press and drag the entire screen around. The second experience is what I would like to have for the entire app experience as it would be for native code.

I’ve noticed this across many mobile web sites over the years. A search across the internet reveals that there is no set way to do this that is easy to find. Some people try to lock it down with CSS and others attempt to do so by catching events in JS.

The Kitchen Sink main iOS page exhibits this behavior on iOS/iPhone. If you go to the Kitchen SInk page and BEFORE you scroll the list of apps you can grab the top nav and the entire page will float around.

Basically, you can not prevent it and you shouldn’t, this is how Safari works. It is only possible to do it correctly in Cordova app. And all existing workarounds will just bring more or other issues.

Would it be possible to artificially add blank items to my scrollable areas so its larger than the screen height always?

That wont solve my splash screen home page but it will fix the other pages in my app if its possible.

You can try to do it but still why? :slight_smile: And this is not too simple as there are different screen size means your code must do a bunch of extra calculations of DOM sizes which can potentially lead to worse performance

The first experience is a user switches to the main Offers tab and then attempts to scroll through the list of people. That attempt fails and instead the entire screen floats around. The user then has to figure out that they first have to press (click) on the scrolling content area. Only then can they press and drag to move the scrollable content and have the nav and tabs locked.

Needless to say, not the best UX in the world and it immediately separates the web app from a native app experience.


I can probably add enough empty items to insure any screen height is covered. Thats probably what I will try first.

As for the splash screen … still thinking about that one.

The other UX issue is that when using prt:refresh then the first time the user pulls down on the list the entire page floats. So to activate a refresh of the page you also have to press (click) once and then the scroll to refresh (it works most of the time but often the page floats again depending on which element you touch first)


[SOLUTION #1]
I used the following to add a 1000px high card to my scrolling list. This solved the initial click floating issue in iOS Safari. There is still the issue of pressing/dragging on the top nav which makes the page float but at least the scrollable area acts as expected. This solution wont help anyone who has a list that infinite scrolls with new items. In my case my lists are fixed in number. Next I am going to count the number of dynamic items and only add this FILLER if that number is 3 or less. That would create a solution for infinite scroll as well.

  <div class="card offer-card" id="FILLER" style="height:1000px">
  </div>