iphone class="page" and class="scroller" does not work

[tanjaess]

I made an app with brightcove. In Android it works fine...

html

<section class="page pageOne">

<header></header>

<div class="scroller"></div>

</section>

<section class="page pageTwo">

<header></header>

<div class="scroller"></div>

</section>

on Iphone I see all my views at once and no scrolling happens in my views 

[BC-JStreb]

Can you .zip up your template and post it here?

[BC-JStreb]

Attached is an updated .zip with scrolling working correctly.  

The issue was that the <div class="content"> and the <div class="scroller"> where flipped.  (Scroller was inside of content instead content being inside of scroller.)  To take advantage of App Cloud's built in scrolling you need two things:

1. A block element with a class of scrolling that is a direct child of a block element with a class of page.
2. A block element inside of a the element with the class of scrolling.  

The typical structure is:

<!-- Your page which will take up the entire viewport -->

<section class="page">

   <!-- A class of header on a block element for your fixed header.  This is optional -->

   <header class="header">Your header</header>

   <!-- A block element with a class of scroller to -->

   <div class="scroller">

     <!-- A block element whose content will be scrolled -->

      <div class="content></div>

   </div>

</section>

I also noticed that you had a .scrolling-element-class with the relatively new CSS of:

overflow: auto;
-webkit-overflow-scrolling: touch;

In App Cloud we have not yet started taking advantage of this because we have found it to be very buggy.  Content will often not be rendered when it is scrolled into view.  I took this out of your stylesheet as I expect it could cause problems.

- Jesse

[tanjaess]

Hello Jesse,

Thx! Tested and the scroller class works.

However I can still slide from pageOne to pageTwo on Iphone... Any idea how I could solve that? 

I had the .scrolling-element-class in it because my App Clouyd's built in scrolling wouldn't work. You fixed that :) so it can be trown out. 

Tanja

[BC-JStreb · Accepted solution]

Hi Tanja,

To make it so that you cannot scroll left to right you just have to add the following code to your JavaScript file:

//Stop scrolling from left to right on pages
$( document ).bind( "touchmove", function(evt) {
  evt.preventDefault();
});

This something we plan to add to the SDK by default but for now you can add that code.  I have also attached an updated version of your app for your convenience.  

- Jesse

[tanjaess]

Hello Jesse, 

Thank you! Would be great if added to the sdk!

Tanja