JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<div class="bg">
    <span>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdasasdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br><br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br></span>
</div>

CSS

html, body{
    height:100%;
    min-height:100%;
    margin:0;
    padding:0;
}
.bg{
    width:100%;
    height:100%;
    background: #fff url(http://blog.travefy.com/wp-content/uploads/2013/07/wonderful-beach-hd-wallpaper-nature-amp-landscape-wallpapers.jpg) no-repeat fixed 0 0; 
    overflow:auto;
}

JavaScript

jQuery.extend(jQuery.easing, {
    easeOutQuint: function(x, t, b, c, d) {
        return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
    }
});

var wheel = false,
    $docH = $(document).height() - $(window).height(),
    $scrollTop = $(window).scrollTop();

$(window).bind('scroll', function() {
    if (wheel === false) {
        $scrollTop = $(this).scrollTop();
    }
});
$(document).bind('DOMMouseScroll mousewheel', function(e, delta) {
    delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 120;
    wheel = true;

    $scrollTop = Math.min($docH, Math.max(0, parseInt($scrollTop - delta * 30)));
    $($.browser.webkit ? 'body' : 'html').stop().animate({
        scrollTop: $scrollTop + 'px'
    }, 2000, 'easeOutQuint', function() {
        wheel = false;
    });
    return false;