iScroll 5.x demo

Demonstrates scrolling to list items in a list hosted in a fixed-height wrapper div.

HTML

<div>
    <p>Scroll the list inside the box manually or use the buttons below to scroll programmatically.</p>
    <div id='wrapper'>
        <ul id='scroller'>
            <li>zero</li>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
            <li>six</li>
            <li>seven</li>
            <li>eight</li>
            <li>nine</li>
            <li>ten</li>
            <li>eleven</li>
            <li>twelve</li>
            <li>zero</li>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
            <li>six</li>
            <li>seven</li>
            <li>eight</li>
            <li>nine</li>
            <li>ten</li>
            <li>eleven</li>
            <li>twelve</li>            
        </ul>
    </div>
    <br/>
    <div>
        <span>Target item # (zero-based): </span><input id='ndx' type='text' inputmode='numeric' value='5'/>
        <button id='scrollItemTop'>Scroll to top of item</button>
        <button id='scrollItemCenter'>Center item in list</button>
    </div>
</div>

CSS

#wrapper {
    
    /* `overflow: hidden` and an explicit height are crucial for iScroll to work correctly */
    overflow: hidden;
    height: 150px;
    
    border: solid black;
    background: #ddd;
    padding: 0;
    margin: 0;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    border: solid gray;
}

.highlight {
    color: white;
    background: #2F5591;
}

#ndx {
    width: 2em;
}

JavaScript

/*

 This demo is based on iScroll 5.x - see https://github.com/cubiq/iscroll - and
 demonstrates:
   * scrolling a list to the top of a specified item
   * scrolling a list so that a specified item is vertically centered in it.
 
 iScroll has more features, such as scrolling to or by pixel offsets.
  
 Note: 
  * The iScroll .js file used in this demo is loaded directly and dynamically from Github - see URL below.
  * If you only need to support mobile environments, loading the "iscroll-lite[-min].js" variant is sufficient.
        
*/ 

$(function() {
    
    var URL_ISCROLL_JS = 'https://raw.github.com/cubiq/iscroll/v5.0.4/dist/iscroll-min.js';

    // !! We load the iScroll .js file dynamically, because using jsFiddle's "External Resources" feature to reference the
    // !! is blocked in some browsers (e.g., Chrome) for security reasons, since GitHub serves files as MIME type 'text/plain'.
    var iscrollScript = document.createElement('script');
    iscrollScript.type = 'text/javascript';
    iscrollScript.async = false;
    iscrollScript.onload = function () { doIt(); };
    iscrollScript.src = URL_ISCROLL_JS;
    var head=document.getElementsByTagName('head')[0];
    head.appendChild(iscrollScript);
    
})();

function doIt() {
    
    // Initialize the scrolling region via the *wrapper* element, which acts as the viewport.
    // The scrolling element is by convention the *first child* - if you need to scroll multiple elements,
    // wrap them in another div.
    // This statement alone will give you scrolling with inertia and rubber-banding.
    var scroller = new IScroll('#wrapper');
            
    // Scroll to top of item targeted.
    $('#scrollItemTop').click(function() {
        
        // Determine target item.
        var $item = getTargetItem()
        
        // Tell iScroll to scroll to the top of the target item.
        // Note: Be sure to pass the naked DOM element, not the jQuery object.
        scroller.scrollToElement($item[0]);
...