如何在 famo.us 滚动视图上添加滚动条？

Question

与this question about scrollview 相关，我感兴趣的是相反的——如何从代码中控制滚动并添加滚动条。只是想知道 famo.us 是否有任何预设方法可以做到这一点，或者我们是否必须手动编码所有内容。

当前的滚动视图在移动设备上非常棒，但对于 PC 用户，例如在没有鼠标滚轮的笔记本电脑上，它们不可用...

Answer 1

目前在 Famo.us 中没有自动添加滚动条的方法。就像在另一个问题中一样。您必须使用 scrollview.sync 的 update 事件自行更新滚动条。

scrollview.sync.on('update',function(e){ // Do Something });

如果您在构建的滚动条上使用可拖动修饰符，您可以监听可拖动事件更新，然后相应地设置滚动视图位置。

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)
})

显然，您需要计算内容大小，以确定滚动条的大小，并使用该大小标量来确定在可拖动对象上移动的每个像素在内容中的含义。

祝你好运！

编辑：我有时间为您构建一个工作示例

http://higherorderhuman.com/examples/scrollbars.html

您必须自己处理调整大小的问题。滚动视图有一些古怪的行为，我使用了一些变通方法来解决。例如，即使分页未激活，getPosition 也会返回页面位置。所以我创建了一个视图并将所有内容放在视图中，并将单个视图添加到滚动视图中..

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]) ;

  }

})