JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<script type="text/javascript" src="http://cubiq.org/dropbox/iscroll4/src/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 id="bktest">test</div>
<dl>
    <dt>current_y</dt>
    <dd id="info-current-y"></dd>
    
    <dt>current_height</dt>
    <dd id="info-current-height"></dd>
    
    <dt>current_middle</dt>
    <dd id="info-current-middle"></dd>
    
    <dt>current_target</dt>
    <dd id="info-current-target"></dd>
    
    <dt>item_heights</dt>
    <dd id="info-item-heights"></dd>
    
    <dt>item_offsets</dt>
    <dd id="info-item-offsets"></dd>
</dl>

CSS

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

JavaScript

var leftwheel;
function test() {
    
    // get the current offset of the scroller, this is not an element DOM property,
    // instead it's the property that the iScroll object seems to use to keep track
    // of what to set the CSS tranform values to.
    // (this is expected to be the top of the slotinner compared to the leftwheel)
    var current_y = leftwheel.y;
    
    // get the current height of the scroller window
    // (expected to be the height of the leftwheel viewable area)
    var current_height = $('#leftwheel').height();
    
    // get the middle y position, we'll need to use this to get the
    // item from the middle of the window
    var current_middle = current_height / 2;

    // do some math to get the target cord
    // (y position of the middle relative to the scrollers current scroll position)
    var current_target = Math.abs(current_y) + current_middle;
    
    // grab the list of children we'll need to account for
    var $children = $(leftwheel.scroller).find('li');
    
    // build an array with the heights of every list element
    var item_heights = [];
    var item_offsets = [];
    $children.each(function(n) {
        item_heights.push($(this).height());
        item_offsets.push(this.offsetTop);
    });

    var child_count = $children.length;
    var middle_child = false;
    for(var i = 0; i < child_count; i++)
    {   
        // do some math to get the cords of the current item
        var item_top = item_offsets[i];
        var item_bottom = item_top + item_heights[i];
        
        // look for the item with a top less than the target and a bottom greater than
        if(item_top <= current_target && item_bottom >= current_target)
        {
            // do something with the center item
            $('#bkodate').val($children[i].innerHTML);
        }
    }
    
    // write test info to the screen
    $('#info-current-y').html(current_y);
    $('#info-current-height').html(current_height);
   ...