JSFiddle - React, Tailwind, and code Playground

by kubedan

HTML

<div class="top">Top</div>
<div class="footer">Footer</div>
<div class="button"><a href="javascript:void(0)">Toggle scrolling</a></div>

CSS

html {
    overflow: scroll important;
}

.top {
    height:800px;
}

.button {
    right:10px;
    top:0px;
    position:fixed;
}

JavaScript

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = [32, 33, 34, 35, 36, 37, 38, 39, 40];



function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    }
    e.returnValue = false;
}

function keydown(e) {
    for (var i = keys.length; i--;) {
        if (e.keyCode === keys[i]) {
            preventDefault(e);
            return;
        }
    }
}

function wheel(e) {
    preventDefault(e);
}

function disable_scroll() {
    if (window.addEventListener) {
        window.addEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = wheel;
    document.onkeydown = keydown;
    var scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        ];
    //document.body.style.overflow = 'hidden';  // firefox, chrome
    //document.body.scroll = "no";    // ie only
    window.onscroll = function() {
        window.scroll(scrollPosition[0], scrollPosition[1]);
    };
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;
    //document.body.style.overflow = 'auto';  // firefox, chrome
    //document.body.scroll = "yes";    // ie only
    // un-lock scroll position
    window.onscroll = function() {};
}

$(".button a").toggle(function() {
    disable_scroll();
}, function() {
    enable_scroll();
});