How can I turn off scrolling without hiding it?

Problem

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.

Update

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.

Css

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

JS

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

Answered by Fabrizio Calderan

Solution #2

Four little additions to the accepted solution:

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

CSS

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...
     $('html').addClass('noscroll').css('top',-scrollTop);         
}

Enable scroll

var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('noscroll');
$('html,body').scrollTop(-scrollTop);

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 );
       event.preventDefault();
    });
};

$.fn.enableScroll = function() {
    $(window).off('scroll.scrolldisabler');
};

//disable
$("#selector").disableScroll();
//enable
$("#selector").enableScroll();

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.

body.noscroll
{
    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) {
    e.preventDefault();
}

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

e.g.

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

Answered by dmackenz

Post is based on https://stackoverflow.com/questions/8701754/how-to-disable-scroll-without-hiding-it