JSFiddle - React, Tailwind, and code Playground

by mrtsherman

CSS

body {
    min-height: 2000px;
    overflow: hidden;
    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
}

JavaScript

//capture mousewheel
$('body').bind('mousewheel DOMMouseScroll', function(e) {
    var scrollTo = null;

    if (e.type == 'mousewheel') {
        scrollTo = (e.originalEvent.wheelDelta * -1);
    }

    if (scrollTo) {
        $(this).scrollTop($(this).scrollTop() + scrollTo);
    }
});

//capture keypresses
$(document).keydown(function(e) {
    console.log(e.keyCode);
    var scrollTo = 120;

    if (e.keyCode == 40) {
        console.log('down');        
    }
    else if (e.keyCode == 38) {
        console.log('up');
        scrollTo *= -1;
    }
    else if (e.keyCode == 32) {
        console.log('spacebar');
        scrollTo = $(window).height();
    }

    $('body').scrollTop($('body').scrollTop() + scrollTo);
});


//populate window with some data so that we can see scrolling effect
for (var i = 0; i < 300; i++) {
    $('body').append($('<div>'+i+'</div>'));
}