Full Screen lightbox with scrollable content results in double scrollbar

[jamxi (John)]

I have some lightboxes that I’m creating using click interactions and a div set to position fixed set with a width and height set 100% to fill the screen. The lightbox has quite a bit of content so I’ve set the overflow to auto to the lightbox div container. This seems to work fine except for now I have two scrollbars. It looks like overflow-y for the HTML tag for the page is set to scroll. Is there a way to set the HTML tag to overflow hidden or something when the button to open the light box is clicked? Or maybe there is an alternative approach I should be taking. Having any suggestions?

[PixelGeek (Nelson)]

Hi @jamxi welcome to the community

Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance!

[jamxi (John)]

More info:

If you click on the text link that says get recipe

A full screen lightbox displays with the recipe information. The content is displaying in a position fixed div with overflow set to auto so since there is a fair amount of content in the lightbox another scrollbar is being displayed. I’d like to hide or remove the outer one so that just one scroll bar is displayed for just the open lightbox.

[Diarmuid_Sexton]

hi @jamxi

if you turn off the overflow for the body when the text link is clicked, that’ll get rid of the outside scrollbar. you then turn it back on when the user clicks the close button. put this javascript into the footer code of your website.

<script>
 	$('.f-get-recipe').click(function() {
    	$('body').css({
          'overflow': 'hidden',
    	});
	});
  	$('.lg-recipe-closebtn').click(function() {
    	$('body').css({
          'overflow': 'visible',
    	});
	});
</script>

Let me know how you get on. Best of luck!

[jamxi (John)]

Thanks, that was helpful.