JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<script src="https://raw.github.com/darkwing/ScrollSpy/f20294140bbb3805f40530adcedb503bbb9abd05/Source/ScrollSpy.js"></script>
<link href='http://fonts.googleapis.com/css?family=Averia+Serif+Libre:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<div id="container">
<ul>
    <li>&nbsp;</li>
    <li>uno</li>
    <li>due</li>
    <li>tre</li>
    <li>quattro</li>
    <li>cinque</li>    
    <li>sei</li>
    <li>sette</li>
    <li>otto</li>
    <li>nove</li>
    <li>dieci</li>
    <li>&nbsp;</li>
</ul>
</div>
<div id="result">uno</div>

CSS

body{
    font-family: 'Averia Serif Libre';
}

#container{
    width:200px;
    height:150px;
    -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff), color-stop(0.5, #fff), color-stop(0.6, #aaf), color-stop(0.8, #00f)) 21 30 30 21 ;
        padding:2px;
}
ul{

    


    
    background-color:rgba(0,0,255,0.3);
    width:200px;
    height:100%;
    overflow:hidden;
}

li{
    padding:1em;
    background-color:rgba(255,255,255,0.1);    
}

JavaScript

var container = $('container').getFirst();
var drag = new Drag(container, {
    style: false,
    invert: true,
    modifiers: {
        y: 'scrollTop'
    }
});

container.addEvent('mouseleave', function(){
    drag.stop();
})
$$('#container li').each(function(e) {
    var pos = e.getCoordinates();
    var spy = new ScrollSpy({
        container: container,
        min: pos.top - 75,
        max: pos.bottom - 75,
        onEnter: function(position) {
            $('result').set('text', e.get('text'));
        },
        onLeave: function(position) {
            //peter.fade('out');
        }
    });
})