Famo.us Add Scrollbar

Using the compiled library from https://github.com/jperl/famous-compiled

by Mabuti

HTML

<link rel="stylesheet" href="https://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/lib/famous/core/famous.css">
<script src="http://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/src/4f231991.polyfills.js"></script>
<script src="https://rawgit.com/jperl/famous-compiled/97f85aaa64af255adfe0407c941e0e859b0759bc/dist/src/804b0adb.main.js"></script>

CSS

html {
    background-color: #000;
    color: #fff;
}

.famousRedText{
	color: #fa5c4f;
}

.famousRedBackground{
	background-color: #fa5c4f;
}

.famousBlueText{
	color: #3cf;
}

.famousBlueBackground{
	background-color: #3cf;
}

.graph {
	background-color: black;
	background-image:
	linear-gradient(rgba(255, 255, 255, 0.25) 1px, transparent 1px), linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.25) 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px), linear-gradient(transparent 3px, black 3px, black 238px, transparent 238px), linear-gradient(90deg, white 3px, transparent 3px, transparent 238px, white 238px);
	background-size:
	40px 40px, 240px 240px, 40px 40px, 240px 240px, 240px 240px, 240px 240px
}

JavaScript

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Modifier = Famous.Core.Modifier;
    var RenderNode = Famous.Core.RenderNode;
    var Surface = Famous.Core.Surface;
    var View = Famous.Core.View;
    var Transform = Famous.Core.Transform;
    var StateModifier = Famous.Modifiers.StateModifier;
    var Scrollview = Famous.Views.Scrollview;
    var Draggable = 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: '20px'
      }
    });

    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:...