Home/ Questions/Q 8146843
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T14:08:30+00:00

I have a HTML page on click of button i am displaying a Popup

  • 0

I have a HTML page on click of button i am displaying a Popup made on same page as div.
On displaying that popup i need to disable the scrollbar of the parent page.
Presently i am doing this:

/* Function to disable parent page scrollbar */
function DisableParentPageScroll(){
    $('body,html').css('overflow-y','hidden');
}

/* Function to enable parent page scrollbar */
function EnableParentPageScroll(){
    $('body,html').removeAttr("style");
}

But when i am disabling the page there is a page shift observed. How can i prevent this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The term which you are using Page Shift, its occurring because you are removing the scrollbar and when the scroll bar is removed the space becomes empty and then the design document gets more space and hence its shifting. If you want to avoid this you have to add some Padding or Margin to the external wrapper or <body>.

    For e.g. like this

    /* Function to disable parent page scrollbar */
function DisableParentPageScroll(){
    $('html').css('overflow', 'hidden'); // Added this for few browsers
    $('body').css({
        'overflow-y':'hidden',
        'padding-right': '20px' // Asuming the scrollbar width as 20px
     });
}

/* Function to enable parent page scrollbar */
function EnableParentPageScroll(){
    $('html').removeAttr('style'); // Added this for few browsers
    $('body').css({
        'overflow-y':'auto',
        'padding-right': '0'
     });
}
    • 0