JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<script type="text/javascript" src="http://www.golfbrowser.com/js/iscroll.js"></script>
<div id="leftwheel"> <div class="slotinner">
    <li>element 0</li>
    <li>element 1</li>
    <li>element 2</li> 
    <li>element 3</li>
    <li>element 4</li> 
    <li>element 5</li>
     <li>element 6</li>
    <li>element 7</li> 
    <li>element 8</li>
    <li>element 9</li> 
    <li>element 10</li>
</ul>
    </div>
</div>
Visible elements: 
<span id="visible-items"></span>
<input id="bkodate" value="" /> <div onclick="test()">test</div>


<script>
    var leftwheel = new iScroll('leftwheel', {
    snap: 'li',
    momentum: true,
    hScrollbar: false,
    vScrollbar: false });
    
    function test() {
    
            var $ul = $('#leftwheel');
   
    $('#bkodate').val( '' );
    
    $ul.find('li').each( function (n) {

        var $this = $(this);
        
        if ( $this.position().top + $this.height() > 100 && $this.position().top < $ul.height() ) {     
            
            var result = $('#leftwheel li:eq(' + (n - 2) + ')').html();
            $('#bkodate').val( result );
        }
    });
}
</script>

CSS

#leftwheel {
    height:200px;
    border:1px solid black;
    overflow:scroll;
}
li {
    height:40px;
    margin:0;
    border:1px solid black;
}

JavaScript

$('#leftwheel').scroll(function() {
    
    var $ul = $(this);
   
    $('#bkodate').val( '' );
    
    $ul.find('li').each( function (n) {

        var $this = $(this);
        
        if ( $this.position().top + $this.height() > 100 && $this.position().top < $ul.height() ) {     
            
            var result = $('#leftwheel li:eq(' + (n - 2) + ')').html();
            $('#bkodate').val( result );
        }
    });
 
});