Container on scroll

Scroll Container

  var Engine     = require("famous/core/Engine");
  var Surface    = require("famous/core/Surface");
  var Scrollview = require("famous/views/Scrollview");

  var ContainerSurface = require('famous/surfaces/ContainerSurface');

  var mainContext = Engine.createContext();

  var scrollview = new Scrollview();

  scrollview.state = new StateModifier({
  	size:[500,500],
  	origin: [0.5,1]
  });

  var surfaces = [];

  scrollview.sequenceFrom(surfaces);

  for (var i = 0, temp; i < 40; i++) {
      temp = new Surface({
           content: "Surface: " + (i + 1),
           size: [500, 200],
           properties: {
               backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
               lineHeight: "200px",
               textAlign: "center"
           }
      });

      temp.pipe(scrollview);
      surfaces.push(temp);
  }

  container = new ContainerSurface({
  	size:[500,500],
  	properties:{
  		overflow:'hidden'
  	}
  })
  container.add(scrollview)

  mainContext.add(scrollview.state).add(container);