WP8/WinJS/Cordova - Scrolling past beginning or end of ListView in PivotItem causes entire page to move

Question

I'm writing an app using the Multi-Device Hybrid App template and WinJS (this is Cordova based).

I've got a single-page navigation setup correctly and the first page to load within my root page contains a Pivot with several PivotItems. Each PivotItem contains a ListView with several items that cause it to extend past the bottom of the page on small devices (phones).

On WP8, when I scroll the ListView to the bottom of the list, it will stop, but if I keep trying to scroll past the bottom, instead of the ListView creating a bounce effect, the entire page moves. And it doesn't do the bounce effect correctly as it results in the Pivot Title being clipped under the status bar at the top of the phone screen. I can scroll it back in the reverse direction and when I hit the top of the list, I get the same effect... the entire page moves.

The bad scrolling behavior only happens when I'm touching the ListView area. If I try to pan the PivotItem headers vertically, nothing happens. IF the ListViews are all empty (i.e. my viewmodel is broken), the scrolling behavior does not happen when I touch the ListView areas.

I have already added this code to my root page's CSS file:

body {
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
 overflow: hidden;
-ms-content-zooming: none;
-ms-touch-action:none;
}

This indeed stops the default WP8 default HTML page bounce. I can load a different page that contains only a few text elements and a button and it won't scroll. It does NOT help with the Pivot scrolling issue.

I tried manually editing my config.xml file and adding this line:

  <preference name="DisallowOverscroll" value="true"/>

It did not help. Anyone have any suggestions?

Answer 1

As a novice in HTML5/javascript app programming, I did not realize there was not a great layout scheme available yet. Microsoft seems to have gotten it right by implementing the CSS grid (-ms-grid) property, but this does not exist on any other browsers yet.

Therefore, to make the current set of controls in WinJS behave properly on all browsers, I had to default to absolute positioning for the headers, content, and footer (appbar). It is not ideal, because the current appbar animation to expand and show labels requires that you leave a good margin at the bottom of the main content area, thereby wasting space.

I use this (liberally adapted from another stackoverflow answer)

<!-- Header not necessary for pivot -->
<header class="row" aria-label="Header content" role="banner">
   {title stuff}
</header>
<section class="content row scroll-y" aria-label="Main content" role="main">
   {main content}
</section>
<footer aria-label="App Bar" role="menubar"
        data-win-control="WinJS.UI.AppBar"
        data-win-options="{placement: 'bottom', layout: 'commands'}">
    {appbar buttons}
 </footer>

The css that goes with this is:

.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }

.header.row { height: 128px; top: 0; }
.content.row { top: 128px; bottom: 50px; }

The actual pixel heights for the header are up to you, but the appbar one works well for the current appbar on WinJS (as of Nov 2014).