JSFiddle - React, Tailwind, and code Playground

by timwhitlock

HTML

<div class="wrap" id="testwrap">
    <div class="grid"> 
        <a href="#" class="item">1</a> 
        <a href="#" class="item">2</a> 
        <a href="#" class="item">3</a> 
        <a href="#" class="item">4</a> 
        <a href="#" class="item">5</a> 
        <a href="#" class="item">6</a> 
        <a href="#" class="item">7</a> 
        <a href="#" class="item">8</a> 
        <a href="#" class="item">9</a> 
        <a href="#" class="item">10</a> 
        <a href="#" class="item">11</a> 
        <a href="#" class="item">12</a> 
        <a href="#" class="item">13</a> 
        <a href="#" class="item">14</a> 
        <a href="#" class="item">15</a> 
        <a href="#" class="item">16</a> 
        <a href="#" class="item">17</a> 
        <a href="#" class="item">18</a> 
        <a href="#" class="item">19</a> 
        <a href="#" class="item">20</a> 
    </div>        
</div>

CSS

/**
 * Progressive enhancement for IE10 touch properties
 */

.wrap {
    -ms-scroll-snap-points-x: snapInterval( 0px, 187px );
    -ms-scroll-snap-type: mandatory;
    -ms-scroll-chaining: none;
}


body {
    margin: 0;
    font: 11px Arial;
}

.wrap{
    width: 100%;
    max-width: 738px;
    height: 110px;
    overflow-x: scroll;
    white-space: nowrap;
    background: #f5f5f5;
}

.grid {
    width: 3740px; /* 20 x 187 */
}

.grid a {
    background: #ccc;
    text-decoration: none;
    color: #333;
    font-size: 20px;
    display: block;
    float: left;
    text-align: center;
    vertical-align: middle;
    width: 137px;
    height: 50px;
    padding: 20px;
    margin: 0 10px 0 0;
}

.grid a:nth-child(2n+2) {
    background-color: #ddd;
}

.grid a:first-child,
.grid a:last-child {
    background-color: #666;
    color: #fff;
}

.grid a.clicked {
    color: #fff;
    background-color: #cc0000;
}

JavaScript

// add click events on items just to illustrate that scroll touch was cancelled

function run(){
   
    /**
     * indicate click with simple message
     */        
    function onLinkClick( event ){
        event.preventDefault();
        var link = event.target,
            html = link.innerHTML;
        link.innerHTML = 'Click';
        link.className = 'item clicked';
        setTimeout( function(){
            link.innerHTML = link.getAttribute('data-num');
            link.className = 'item';
        }, 500 );
        return false;
    }        

    var i = -1,
        wrap  = document.getElementById('testwrap'),
        links = wrap.getElementsByTagName('a');
    
    while( ++i < links.length ){
        links[i].setAttribute('data-num', links[i].innerHTML );
        // very important to use capture here. So container gets event before we do.
        links[i].addEventListener('click', onLinkClick, true );
    }

}
    
// demo only supports modern browsers
document.body.addEventListener && run();