2

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.

dcsan
  • 11,333
  • 15
  • 77
  • 118

1 Answers1

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);
johntraver
  • 3,612
  • 18
  • 17
  • doesn't `target.offsetHeight` in the sizeFrom callback cause the DOM to be queried on every frame? Seems like a bad idea... – speigg Jul 05 '14 at 01:07
  • I was thinking that only a getElement was a query, but this is also considered a ping to the DOM.. surfaces _size is another property that will reveal the actual pixels of the DOM element without that ping, I will work it out and try to fix my answer. – johntraver Jul 06 '14 at 21:41
  • I believe you can use `surface.getSize(true)`. I feel like the scrollView should be able to do this though. Internally, I think the scrollview should not be looking at the given size of a surface, it should be looking at their actual size (using `getSize(true)`). – speigg Jul 19 '14 at 23:07