JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<div id="header"></div>
<div id="content">
<div id="f">
    I'm going to follow you only so far...
</div>
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
<div id="tab">
    this is tab
</tab>
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem...

CSS

#header{height:100px;}
#f {
    background:#ace;
    padding:20px;
    width:200px;
    top:20px; left:0;
}
#tab{color:red;}

JavaScript

$(window).bind('DOMMouseScroll', function(e){
         if(e.originalEvent.detail > 0) {
             $('html, body').animate({
        scrollTop: $("#content").offset().top
    }, 2000);
             //return false;
         }else {
             //scroll up
             console.log('Up');
         }

         //prevent page fom scrolling
         return false;
     });

     //IE, Opera, Safari
     $('#elem').bind('mousewheel', function(e){
         if(e.originalEvent.wheelDelta < 0) {
             $('html, body').animate({
        scrollTop: $("#content").offset().top
    }, 2000);
         }else {
             //scroll up
             console.log('Up');
         }

         //prevent page fom scrolling
         return false;
     });