Scrollable Content with Fixed Header and Footer – Rhomobile App

40 sec read

While using Rhomobile, often you might want to create an app that would have scrollable content with fixed header and footer, horizontally scrollable content, vertically scrollable content, scrollable content with a specific div and so on. Here is a sample app that got all this integrated together for you.
The sample app contains the source code that would have

  • Vertical iScroll
  • Horizontal iScroll
  • Carousel iScroll
  • iScroll inside a fixed-height Div

You can find the source code at https://github.com/spritle/rhodes_iscroll_sample

I believe the important piece of code is at https://github.com/spritle/rhodes_iscroll_sample/blob/master/app/Iscroll/custom_iscroll.erb
[source language=”javascript”]
var myScroll;
function loaded() {
// specify the id of the div that contains the content
myScroll = new iScroll(‘wrapper’, { scrollbarClass: ‘myScrollbar’ });
}
// set touchmove to false
document.addEventListener(‘touchmove’, function (e) { e.preventDefault(); }, false);
document.addEventListener(‘DOMContentLoaded’, loaded, false);
[/source]
Here is some sample screenshots from Android:
     
Here is some sample screenshots from iPhone simulator:
        
Please add your comment if you got some questions or suggestions.

Related posts:

Leave a Reply

Your email address will not be published. Required fields are marked *