JSFiddle - React, Tailwind, and code Playground

by teamair

HTML

<div id="content-wrapper">
    <div class="menu-item">
        <div class="circle"> 
        </div>
    </div>
    <div class="menu-item">
        <div class="circle"> 
        </div>
    </div>
    <div class="menu-item">
        <div class="circle"> 
        </div>
    </div>
    <div class="menu-item">
        <div class="circle"> 
        </div>
    </div>
    <div class="menu-item">
        <div class="circle"> 
        </div>
    </div>
    <div class="menu-item">
        <div class="circle"> 
        </div>
    </div>  
</div>

CSS

#content-wrapper {
    width: 100%;
    height: 960px;
    border: solid black 3px;
    overflow-y: scroll;
}

.menu-item {
    width: 100%;
    height: 240px;
    border-bottom: 1px solid black
}
.menu-item div {
    display:inline-block;
    vertical-align:top;
}
.circle {
    margin:105px 45px;
    width: 30px;
    height: 30px;
    background: #d7d7d7;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.horizontal-stroke {
    width: 100%;
    height: 240px;
    position: fixed;
    top: 120px;
    border: 5px solid blue;
}

JavaScript

var scrollTimerHandle = "";

$("#content-wrapper").scroll(function () {

    var newScrollPosition = parseInt(this.scrollTop / 240) * 240,
        _this = this;

    clearInterval(scrollTimerHandle);

    scrollTimerHandle = setTimeout(function () {
        _this.scrollTop = newScrollPosition;

    }, 240);


});