0

I'm having trouble with disabling the scroll bar on my website when the menu overlay is active (class: .overlay). I created a menu overlay and I would like the scroll bar to be disabled when the overlay is visible. Similar to this Just disable scroll not hide it?

So I would like to disable the scroll bar, not hide it. What I understand so far: Basically what I need to do is to add inline CSS to the html when the overlay is on display: block and remove the inline CSS when the overlay is on display: none;

I tried multiple solutions given on Stackoverflow, but no result so far. This was my latest solution, which didnt work in the end:

if( $(".overlay").css('display') == 'block') { 

$('html').css('position','fixed');
$('html').css('overflow-y','scroll');
$('html').css('width','100%');

} else {
$('html').css('position','');
$('html').css('overflow-y','');
$('html').css('width','');
}

Above is based on this: div display if block jquery

Here is my website (under development):

http://www.wouterpasman.com/view/

The menu overlay is activated when you click the menu button in the top right corner. Goal: When the overlay is active, the scroll bar should be temporarily disabled, but still visible.

Thanks for your assistance!

WPasman
  • 25
  • 5

1 Answers1

0

You can simply add an overflow hidden and auto : 

if( $(".overlay").css('display') == 'block') { 
   $('html').css('position','fixed');
   $('html').css('overflow-y','hidden');
   $('html').css('width','100%');
} else {
   $('html').css('position','');
   $('html').css('overflow-y','');
   $('html').css('width','');
}
Kashkain
  • 478
  • 4
  • 11
  • thanks, but this code doesn't work properly (similar to my code) or at least there is nothing added to the HTML once the overlay menu is display:block. It seems this part if( $(".overlay").css('display') == 'block') { has no effect ... – WPasman Jun 04 '17 at 10:08
  • Also isn't overflow:hidden hiding the scrollbar instead of just disabling it? I would like to disable the scroll bar, not hide it. – WPasman Jun 04 '17 at 10:09
  • 1
    for your test, try : $('.overlay').is(':visible') instead of $('.overlay').css('display') == 'block', and for your scroll, you just need to disable the event temporarly : https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily – Kashkain Jun 04 '17 at 13:07