Disable scroll (workaround).

You can't cancel the scroll event, but you might want to use this approach to disable page scroll.

by Dmitry Morar

HTML

<p>scroll: <a href="javascript:;" class="scroll-disable">disable</a>  <a href="javascript:;" class="scroll-enable">enable</a>
</p>

<h1>AAAAAAA</h1>

<p>scroll: <a href="javascript:;" class="scroll-disable">disable</a>  <a href="javascript:;" class="scroll-enable">enable</a>
</p>
<p>scroll: <a href="javascript:;" class="scroll-disable">disable</a>  <a href="javascript:;" class="scroll-enable">enable</a>
</p>
<p>scroll: <a href="javascript:;" class="scroll-disable">disable</a>  <a href="javascript:;" class="scroll-enable">enable</a>
</p>

<h1>BBBBBBB</h1>

<p>scroll: <a href="javascript:;" class="scroll-disable">disable</a>  <a href="javascript:;" class="scroll-enable">enable</a>
</p>
<p>scroll: <a href="javascript:;" class="scroll-disable">disable</a>  <a href="javascript:;" class="scroll-enable">enable</a>
</p>
<p>scroll: <a href="javascript:;" class="scroll-disable">disable</a>  <a href="javascript:;" class="scroll-enable">enable</a>
</p>
<p>scroll: <a href="javascript:;" class="scroll-disable">disable</a>  <a href="javascript:;" class="scroll-enable">enable</a>
</p>
<p>scroll: <a href="javascript:;" class="scroll-disable">disable</a>  <a href="javascript:;" class="scroll-enable">enable</a>
</p>
<p>scroll: <a href="javascript:;" class="scroll-disable">disable</a>  <a href="javascript:;" class="scroll-enable">enable</a>
</p>

<h1>CCCCCCC</h1>

<p>scroll: <a href="javascript:;" class="scroll-disable">disable</a>  <a href="javascript:;" class="scroll-enable">enable</a>
</p>
<p>scroll: <a href="javascript:;" class="scroll-disable">disable</a>  <a href="javascript:;" class="scroll-enable">enable</a>
</p>
<p>scroll: <a href="javascript:;" class="scroll-disable">disable</a>  <a href="javascript:;" class="scroll-enable">enable</a>
</p>
<p>scroll: <a href="javascript:;" class="scroll-disable">disable</a>  <a href="javascript:;" class="scroll-enable">enable</a>
</p>
<p>scroll: <a href="javascript:;" class="scroll-disable">disable</a>  <a href="javascript:;"...

CSS

body {
    margin:0;
    padding: 1em;
}
body.scrolDisabled {
    position: fixed;
    overflow-y: scroll;

}

JavaScript

$('.scroll-disable').on('click', scrollDisable);
$('.scroll-enable').on('click', scrollEnable);

var $body = $('body'),
    scrollDisabled = false,
    scrollTop;

function scrollDisable() {
    if (scrollDisabled) {
        return;
    }

    scrollTop = $(window).scrollTop();

    $body.addClass('scrolDisabled')
        .css({
        top: -1 * scrollTop
    });

    scrollDisabled = true;
}

function scrollEnable() {
    if (!scrollDisabled) {
        return;
    }

    $body.removeClass('scrolDisabled');
    $(window).scrollTop(scrollTop);

    scrollDisabled = false;
}