How to scroll a big surface ? (ex. an article)

Question

In my prototype famo.us app, I have a HeaderFooter View displaying an "about" page as its content. This page has a lot of text which doesn't fit on a mobile screen.

However, famo.us won't scroll this surface.

I tried to put the surface inside a ScrollView with no success.

So how do I make scrollable a simple, big surface in famo.us ?

Answer 1

There are two ways to approach this. It would have been nice to see what you have tried, but I will offer these two suggestions.

1) The easier non-famous approach would be to simply add the property overflow:'scroll' to the body surface.. Like so..

var contentSurface = new Surface({
  size:[undefined,undefined],
  content: scrollContent,
  properties: {
    overflow:'scroll'
  }
});

2) The famo.us way using a scrollview can be done as well, but you will run into another issue of true-sizing if you are adding a possibly variable length article to your scrollview. That is when you use true-sizing, scrollview does not know how large the view is, and cannot scroll properly. Here is a quick example of getting scrollview inside of header footer. Notice I have a function to call on surfaces deploy. This allows me to use true sizing, and then explicitly set the height in pixels, after the DOM element is created.

Here is the example.. Hope it helps..

var Engine              = require('famous/core/Engine');
var Surface             = require('famous/core/Surface');
var Scrollview          = require('famous/views/Scrollview');
var HeaderFooterLayout  = require('famous/views/HeaderFooterLayout');

var context = Engine.createContext();

var headerFooter = new HeaderFooterLayout();

var scrollview = new Scrollview();

var scrollContent = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt \
 ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \
 ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt \
 ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \
 ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

var scrollSurfaces = [];
scrollview.sequenceFrom(scrollSurfaces);

var contentSurface = new Surface({
  size:[undefined,true],
  content: scrollContent,
  properties: {
    backgroundColor:'red',
    fontSize: '36px'
  }
});

contentSurface.pipe(scrollview);

contentSurface.on('deploy',function(){
  element = contentSurface._currTarget;
  contentSurface.setSize([undefined,element.offsetHeight]);
});

scrollSurfaces.push(contentSurface);

headerFooter.content = scrollview;

headerFooter.header = new Surface({
  size:[undefined,100],
  properties:{
    backgroundColor:'green'
  }
});

headerFooter.footer = new Surface({
  size:[undefined,100],
  properties:{
    backgroundColor:'blue'
  }
});

context.add(headerFooter);