how to add scrollbars on a famo.us scrollview? - famo.us

Question

related to this question about scrollview i was interested in the opposite - how to control scroll from code and add scrollbars. Just wondering if famo.us had any preset method to do this or if we have to hand-code everything.
current scrollviews are great on mobile, but for PC users, for example on a laptop without a mouse-wheel, they're not usable...

Answer 1

There is currently no automatic way to add scrollbars in Famo.us. Just like in the other question. You will have to use the update event of scrollview.sync to update a scrollbar by yourself.
scrollview.sync.on('update',function(e){ // Do Something });
If you use a draggable modifier on the scrollbar you build you could listen to the draggable event update and then set the scrollview position accordingly.
var scrollbar = new Surface();
scrollbar.draggable = new Draggable(..);
context.add(scrollbar.draggable).add(scrollbar);
scrollbar.draggable.on('update', function(e){
posY = e.position[1];
scrollview.setPosition(posY)
})
Obviously you will need to calculate the content size, to determine the size of the scrollbar and use that size scalar to determine what each pixel move on draggable translates to in the content.
Good Luck!
EDIT: I had time to build you a working example
http://higherorderhuman.com/examples/scrollbars.html
You would have to deal with resizing on your own.. There are quirky behaviors of scrollview that I used a few workarounds to solve. For instance getPosition was returning the page location even when paging was not active. So I created a view and placed all content in the view and added the single view to the scrollview..
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var View = require('famous/core/View');
var StateModifier = require('famous/modifiers/StateModifier');
var Transform = require('famous/core/Transform');
var Scrollview = require('famous/views/Scrollview');
var Draggable = require('famous/modifiers/Draggable');
var context = Engine.createContext();
// Set up content
var contentScrollview = new Scrollview();
var contentSurfaces = [];
contentScrollview.sequenceFrom(contentSurfaces);
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 contentView = new View({ size: [undefined,500*4] });
for (var i = 0; i < 4; i++) {
contentSurface = new Surface({
size: [undefined,500],
content: content,
properties: {
backgroundColor: 'hsl('+ (i * 360 / 40) + ', 100%,50%)',
color: 'white',
fontSize: '24px',
padding: '100px'
}
});
contentSurface.pipe(contentScrollview);
contentSurface.state = new StateModifier({
transform: Transform.translate(0,i*500,0)
})
contentView.add(contentSurface.state).add(contentSurface);
}
contentSurfaces.push(contentView);
context.add(contentScrollview);
var contextSize = context.getSize();
var contentSize = 4 * 500 // Most Likely you keep track of this when creating
var scrollbarSize = contextSize[1] * contextSize[1] / ( contentSize );
var scrollbar = new Surface({
size: [20,scrollbarSize],
properties: {
backgroundColor: 'green'
}
})
scrollbar.draggable = new Draggable({
xRange: [0,0],
yRange: [0,contextSize[1]-scrollbarSize]
})
scrollbar.pipe(scrollbar.draggable);
context.add(scrollbar.draggable).add(scrollbar);
var dragging = false;
scrollbar.draggable.on('start',function(e){
dragging = true;
});
contentScrollview.sync.on('start',function(){
dragging = false;
})
Engine.on('prerender',function(){
if (dragging) {
var maxBar = contextSize[1] - scrollbarSize;
var barPos = scrollbar.draggable.getPosition()[1] * 1.0 / ( maxBar * 1.0);
var maxScroll = contentSize - contextSize[1];
var posY = maxScroll * barPos;
// This getPosition() is needed to prevent some quirkiness
contentScrollview.getPosition();
contentScrollview.setPosition(posY);
contentScrollview.setVelocity(0);
} else {
var maxScroll = contentSize - contextSize[1];
var scrollPos = contentScrollview.getPosition() / maxScroll;
var barPosition = scrollPos * (contextSize[1]-scrollbarSize);
scrollbar.draggable.setPosition([0,barPosition,0]) ;
}
})