Famo.us ScrollView MouseOver

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

by notme

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>
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<body class="root-body">
    
</body>

CSS

input { font-size: 40px; }
.root-body{
    position:absolute;
}

JavaScript

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Surface = Famous.Core.Surface;
    var InputSurface = Famous.Surfaces.InputSurface;
    var Modifier = Famous.Core.Modifier;
    var Scrollview = Famous.Views.Scrollview;
    var Transform = Famous.Core.Transform;
    
    var mainContext = Engine.createContext();
    
    var scrollview = new Scrollview();
    var surfaces = [];
    
    scrollview.sequenceFrom(surfaces);
    
    var inputhtml = '<div><input type="text" /></div>';
    
    for (var i = 0, temp; i < 40; i++) {
        temp = new Surface({
            content: '',//inputhtml,
            size: [undefined, 100],
            properties: {
                backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                lineHeight: "200px",
                textAlign: "center"
            },
            index: i
        });
        
        var temp2 = new InputSurface({
            size: [undefined, 50],
            value: 'test: edit me',
            type: 'text'
        });
        temp2.pipe(scrollview);
        surfaces.push(temp2);
        
        temp.pipe(scrollview);
        surfaces.push(temp);
    }
    mainContext.add(scrollview);
    
    
});