how best to create a single scrollable view in famo.us?

Question

Famo.us has a "Scrollview" but it only scrolls if you have multiple surfaces inside it.

I would like a single long page of text, but this doesn't respond to scrolling. Given that famo.us deliberately overrides normal native scrolling views ( https://github.com/Famous/views/issues/45 ), what is the best method to get famous to scroll a long page of content?

I'm considering breaking all the content html apart (eg div by div), and adding a bunch of surfaces into a normal scrollview. this may work for some simple content but would be complex for anything non-trivial - JS would have to parse the DOM of the to-be-displayed html.

I also thought maybe an iFrame could be setup to have its own scrollbar, but haven't got that to work yet. this would mean somehow overriding famous' CSS which is currently hiding all clipping. however the fact all touchmove events get swallowed by famous would require a lot of other workarounds, or forking famous.

Answer 1

I will assume you are using a true-sized surface for the dynamic length long form content. When doing so, scrollview can't understand a size of true, so you get no scrolling. We can instead wrap our surface in a RenderNode and Modifier and use the sizeFrom function of Modifier to wrap the true sized surface with an actual size in pixels. This way scrollview knows how long your content is and will scroll accordingly.

Here is the example! Hope it helps!

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

var context = Engine.createContext();

var content = "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 scrollview = new Scrollview();

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

surface = new Surface({
    size:[undefined,true],
    content: content,
    properties:{
        fontSize:'100px'
    }
})

surface.pipe(scrollview);

surface.node = new RenderNode();
surface.mod = new Modifier();

surface.mod.sizeFrom(function(){
    target = surface._currTarget;
    if (target){
        return [undefined,target.offsetHeight];
    } else {
        return [undefined,true];
    }
})

surface.node.add(surface.mod).add(surface);

surfaces.push(surface.node);

context.add(scrollview);