JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<script src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7<br>Line 8<br>Line 9<br>Line 10<br>Line 11<br>Line 12<br>Line 13<br>Line 14<br>Line 15<br>Line 16<br>Line 17<br>Line 18<br>Line 19<br>Line 20<br>Line 21<br>Line 22<br>Line 23<br>Line 24<br>Line 25<br>Line 26<br>Line 27<br>Line 28<br>Line 29<br>Line 30<br>Line 31<br>Line 32<br>Line 33<br>Line 34<br>Line 35<br>Line 36<br>Line 37<br>Line 38<br>Line 39<br>Line 40<br>Line 41<br>Line 42<br>Line 43<br>Line 44<br>Line 45<br>Line 46<br>Line 47<br>Line 48<br>Line 49<br>Line 50<br>Line 51<br>Line 52<br>Line 53<br>Line 54<br>Line 55<br>Line 56<br>Line 57<br>Line 58<br>Line 59<br>Line 60<br>Line 61<br>Line 62<br>Line 63<br>Line 64<br>Line 65<br>Line 66<br>Line 67<br>Line 68<br>Line 69<br>Line 70<br>Line 71<br>Line 72<br>Line 73<br>Line 74<br>Line 75<br>Line 76<br>Line 77<br>Line 78<br>Line 79<br>Line 80<br>Line 81<br>Line 82<br>Line 83<br>Line 84<br>Line 85<br>Line 86<br>Line 87<br>Line 88<br>Line 89<br>Line 90<br>Line 91<br>Line 92<br>Line 93<br>Line 94<br>Line 95<br>Line 96<br>Line 97<br>Line 98<br>Line 99<br>Line 100<br>Line 101<br>Line 102<br>Line 103<br>Line 104<br>Line 105<br>Line 106<br>Line 107<br>Line 108<br>Line 109<br>Line 110<br>Line 111<br>Line 112<br>Line 113<br>Line 114<br>Line 115<br>Line 116<br>Line 117<br>Line 118<br>Line 119<br>Line 120<br>Line 121<br>Line 122<br>Line 123<br>Line 124<br>Line 125<br>Line 126<br>Line 127<br>Line 128<br>Line 129<br>Line 130<br>Line 131<br>Line 132<br>Line 133<br>Line 134<br>Line 135<br>Line 136<br>Line 137<br>Line 138<br>Line 139<br>Line 140<br>Line 141<br>Line 142<br>Line 143<br>Line 144<br>Line 145<br>Line 146<br>Line 147<br>Line 148<br>Line 149<br>Line 150<br>Line 151<br>Line 152<br>Line 153<br>Line 154<br>Line 155<br>Line 156<br>Line 157<br>Line 158<br>Line 159<br>Line 160<br>Line 161<br>Line 162<br>Line 163<br>Line 164<br>Line 165<br>Line 166<br>Line...

JavaScript

// Ugly hack to disable browser scrolling (downside: hides scrollbar!!!)
$('html').css('overflow', 'hidden');

// Get viewport height by which to jump (up or down)
var viewportHeight = $(window).height();
 

// Disable document keypress event
// which would scroll the content even with overlow: hidden
$(document).on('keypress', function(event){
    return false;
});

// Scroll on arrow up/down keys
$(document).on('keydown', function(event){
    // arrow down key
    if (event.which == 40)
        window.scrollBy(0, viewportHeight);
    // arrow up key
    if (event.which == 38)
        window.scrollBy(0, -viewportHeight);
});