Avoid scrollbar on popup - position: fixed-CodePudding

I have a Sidebar that open when I click on a button, and I set its position to fixed so that it can take the entire screen like this (I use TailwindCSS) :

return (
    <div className="fixed z-40 flex left-0 top-0 h-screen w-screen">

      // this div set a gray color to the entire screen
      <div className="w-full bg-zinc-500 fade-in"></div>

      // this div is 600px wide on right of screen
      <div className="bg-stone-100 w-600 bg-white">
        <div className="p-8">
          [ MY FORM ]
        </div>
      </div>

    </div>
  )

I set it fixed because it is an under component, and I need it to overcome the header and another sidebar that are called on top of the App.

Here is the structure of my App :

function App() {
    const AppLayout = () => (
        <>
            <Header />
            <div className="flex">
                <Sidebar />
                <Outlet />
                // the sidebar I'm trying to fix is in Outlet
            </div>
        </>
    );

Problem is : when I open my sidebar (below), it takes all screen, but the scroll bar scrolls the page that is UNDER this sidebar, not the content IN my sidebar.

Any idea how I can disable the scroll bar for the page, and enable one for my fixed component ?

PS : here is a sandbox that reproduce the problem sandbox (as you can see, i can scroll the page but not the popup)

CodePudding user response：

As @iamhuynq mentioned in the comments, setting up an overflow-auto and a useEffect solve the problem. Thank you !

CodePudding user response：

You can disable page scroll by set overflow hidden for body when you open sidebar and remove when you close. Also add overflow auto on sidebar

useEffect(() => {
    const openSideBar = () => {
        document.body.style.overflow = 'hidden';
    };
    const closeSideBar = () => {
        document.body.style.overflow = '';
    };
    if (isOpenSidebar) openSideBar()
    else closeSideBar()
    return () => closeSideBar();
}, [isOpenSidebar]);