Как добавить полосы прокрутки на скролл-фаме famo.us?

Question

В связи с этим вопросом о scrollview меня интересовало обратное - как управлять прокруткой из кода и добавлять полосы прокрутки. Просто интересно, есть ли в famo.us какой-либо предустановленный метод для этого или нам нужно все вручную кодировать.

Текущие прокрутки хороши для мобильных устройств, но для пользователей ПК, например, на ноутбуке без колесика мыши, они непригодны для использования...

Answer 1

В настоящее время в Famo.us нет автоматического способа добавления полос прокрутки. Как и в другом вопросе. Вам придется использовать событие обновления scrollview.sync для самостоятельного обновления полосы прокрутки.

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

Вам придется иметь дело с изменением размера самостоятельно. Существуют причудливые варианты поведения scrollview, для решения которых я использовал несколько обходных путей. Например, 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]) ;

  }

})