Just disable scroll not hide it?

Just disable scroll not hide it?

I’m trying to disable the html/body scrollbar of the parent while I’m using a lightbox. The main word here is disable. I do not want to hide it with overflow: hidden;.
The reason for this is that overflow: hidden makes the site jump and take up the area where the scroll was.
I want to know if its possible to disable a scrollbar while still showing it.

Solutions/Answers:

Solution 1:

If the page under the overlayer can be “fixed” at the top, when you open the overlay you can set

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

you should still see the right scrollbar but the content is not scrollable. When you close the overlay just revert these properties with

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

I just proposed this way only because you wouldn’t need to change any scroll event

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.

Related:  How can I fetch an array of URLs with Promise.all?

Css

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

JS

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

Solution 2:

Four little additions to the selected solution:

  1. Apply ‘noscroll’ to html instead of to body to prevent double scroll bars in IE
  2. To check if there’s actually a scroll bar before adding the ‘noscroll’ class. Otherwise, the site will also jump pushed by the new non-scrolling scroll bar.
  3. To keep any possible scrollTop so the entire page doesn’t go back to the top (like Fabrizio’s update, but you need to grab the value before adding the ‘noscroll’ class)
  4. Not all browsers handle scrollTop the same way as documented at http://help.dottoro.com/ljnvjiow.php

Complete solution that seems to work for most 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 putting me on the right track and to Brodingo for the solution to the double scroll bar

Related:  Array Join vs String Concat

Solution 3:

With jQuery inluded:


disable

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

    $(window).on('scroll.scrolldisabler',function ( event ) {
       $(window).scrollTop( window.oldScrollPos );
       event.preventDefault();
    });
};

enable

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

usage

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

Solution 4:

This worked really 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();
}

just wrap those two lines of code with whatever decides when you are going to lock scrolling.

e.g.

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

Solution 5:

You cannot disable the scroll event, but you can disable the related actions that lead to a scroll, like mousewheel and touchmove:

$('body').on('mousewheel touchmove', function(e) {
      e.preventDefault();
});

Solution 6:

I’m the OP

With the help of answer from fcalderan I was able to form a solution. I leave my solution here as it brings clarity to how to use it, and adds a very crucial detail, width: 100%;

I add this class

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

this worked for me and I was using Fancyapp.

Related:  Validate email address textbox using JavaScript