Coder Perfect

How can I turn off scrolling without hiding it?


I’m trying to disable the parent’s html/body scrollbar while utilizing a lightbox. Disable is the key word here. I don’t want to use overflow: hidden; to conceal it.

This is because overflow: hidden causes the site to jump and take up the space where the scroll used to be.

I want to know if its possible to disable a scrollbar while still showing it.

Asked by Dejan.S

Solution #1

If the page beneath the overlayer may be “fixed” at the top, you can configure it when you open the overlay.

body { position: fixed; overflow-y:scroll }

The right scrollbar should still be visible, but the content is not scrollable. Simply revert these properties with after you close the overlay.

body { position: static; overflow-y:auto }

This is the only approach I could think of because you wouldn’t have to adjust any scroll events.


You could also do a slight improvement: if you get the document.documentElement.scrollTop property via javascript just before the layer opening, you could dynamically assign that value as top property of the body element: with this approach the page will stand in its place, no matter if you’re on top or if you have already scrolled.


.noscroll { position: fixed; overflow-y:scroll }


$('body').css('top', -(document.documentElement.scrollTop) + 'px')

Answered by Fabrizio Calderan

Solution #2

Four little additions to the accepted solution:

Complete solution that appears to work with the majority of browsers:


html.noscroll {
    position: fixed; 
    overflow-y: scroll;
    width: 100%;

Disable scroll

if ($(document).height() > $(window).height()) {
     var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...

Enable scroll

var scrollTop = parseInt($('html').css('top'));

Thanks to Fabrizio and Dejan for pointing me in the right direction, and to Brodingo for the double scroll bar solution.

Answered by Mike Garcia

Solution #3

$.fn.disableScroll = function() {
    window.oldScrollPos = $(window).scrollTop();

    $(window).on('scroll.scrolldisabler',function ( event ) {
       $(window).scrollTop( window.oldScrollPos );
$.fn.enableScroll = function() {

Answered by ceed

Solution #4

I’m the OP

I was able to come up with a solution with the help of fcalderan’s response. I’m leaving my answer here because it clarifies how to use it and adds a crucial detail, width: 100%;

This is a class I’ve added.

    position: fixed; 
    overflow-y: scroll;
    width: 100%;

this worked for me and I was using Fancyapp.

Answered by Dejan.S

Solution #5

This worked well for me….

// disable scrolling
$('body').bind('mousewheel touchmove', lockScroll);

// enable scrolling
$('body').unbind('mousewheel touchmove', lockScroll);

// lock window scrolling
function lockScroll(e) {

Simply surround those two lines of code in whatever determines when scrolling will be locked.


$('button').on('click', function() {
     $('body').bind('mousewheel touchmove', lockScroll);

Answered by dmackenz

Post is based on