JSFiddle - React, Tailwind, and code Playground

by otinanaipali

HTML

<div id="maxWidthHolder">
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
        <li>07</li>
        <li>08</li>
        <li>09</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
    </ul> <span id="numBlocksPassed">0</span>
 <span id="numBlock">0</span>

</div>

CSS

body {
    margin:0;
    padding:0;
    background:#334
}
#maxWidthHolder {
    position:absolute;
    height:260px;
    width:100%;
    top:50%;
    margin-top:-100px;
    background:#ccc;
    overflow: hidden;
}
ul {
    margin:0;
    padding:0;
    list-style:none;
    margin: 10px auto;
    padding-bottom: 40px;
    height:180px;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
}
li {
    display:block;
    position:absolute;
    top:0;
    left:0;
    height:180px;
    width:100px;
    background:#fff;
    font-size: 12px;
    color:#000;
    line-height: 16px;
    text-align:center;
}
li:first-child {
    margin-left:0;
}

JavaScript

$(function () {
    var scrollBlock = $('#maxWidthHolder > ul');
    var contentData = scrollBlock.html();
    var contentWidth;
    var contentNum = $('#maxWidthHolder > ul > li').length;
    var lastLeftLocation = 0;
    var margin = 10;

    function getContentWidth() {
        contentWidth = 0;
        $('#maxWidthHolder > ul > li').each(function () {
            $(this).css("left", (contentWidth += margin) + "px");
            contentWidth += $(this).width();
        });
    }
    getContentWidth();

    scrollBlock.scroll(function (e) {

        //calculate number of blocks scrolled outside the left side
        var numBlocksPassed = Math.floor(scrollBlock.scrollLeft() / (contentWidth / contentNum));
        $("#numBlocksPassed").html(numBlocksPassed);

        //calculate the current block passed 
        var numBlock = numBlocksPassed - (Math.floor((numBlocksPassed / contentNum)) * contentNum);
        $("#numBlock").html(numBlock);

        //when scrolling on right
        if (lastLeftLocation > scrollBlock.scrollLeft()) {
            
        }
        //when scrolling on left
        else {
            var curBlock = $('#maxWidthHolder > ul > li:eq(' + (numBlock - 1) + ')');
            var placeAtEnd = ((numBlocksPassed - 1) * curBlock.width()) + (margin * (numBlocksPassed));
            var newContentWidth = contentWidth + placeAtEnd;
            curBlock.css("left", newContentWidth + "px");
        }

        lastLeftLocation = e.currentTarget.scrollLeft;

    });

});

function handle(delta) {
    var target = $('#maxWidthHolder > ul');
    var left = target.scrollLeft() - delta;
    target.scrollLeft(left);
}

function wheel(event) {
    var delta = 0;
    if (!event) /* For IE. */
    event = window.event;
    if (event.wheelDelta) { /* IE/Opera. */
        delta = event.wheelDelta / 40;
    } else if (event.detail) { /** Mozilla case. */
        delta = -event.detail / 1;
    }
    if (delta) handle(delta);
    if (event.preventDefault)...