JSFiddle - React, Tailwind, and code Playground

by laksdesign

HTML

<div id="wrapper">
    <div id="wrappercontent">
    <div id="section1" class="section">section 1</div>
    <div id="section2" class="section">section 2</div>
    <div id="section3" class="section">Section 3</div>
    </div>
 <div id="nav">
            <li><a href="#section1" class="scroll">1</a></li>
            <li><a href="#section2" class="scroll">2</a></li>
            <li><a href="#section3" class="scroll">3</a></li>
        </div>
        </div>

CSS

body{
    background:#f0efe4;
    letter-spacing:-1px;
     font-family:Georgia;
    font-size: 34px;
    font-style: italic;
    width:12000px;
    overflow: hidden;
}
#wrapper{
    width:1000px;
    height:300px;
    overflow: hidden;
}
#wrappercontent{
    height:auto;
    width:12000px;
}
#nav{
    z-index:1;
    position:fixed;
    top: 25px;
}
.section{
    margin:0px;
    bottom:0px;
    width:2000px;
    float:left;
    height:100px;
}

JavaScript

jQuery(document).ready(function($) {

    $(".scroll").click(function(event) {
        event.preventDefault();
        $('#wrapper').animate({ scrollLeft: $('#wrapper').scrollLeft() + $(this.hash).offset().left }, 800);
    });

    $('body').bind('mousewheel', function(scroll){
        if(scroll.originalEvent.wheelDelta /120 > 0) {
        scroll.preventDefault();
         $('#wrapper').animate({ scrollLeft: $('#wrapper').scrollLeft() + $(this.hash).offset().left }, 800);
        }
        else{
        }
    });
});