Issue:
I've am building a sidebar with, behind it, a dark transparent screen (that when clicked hides the sidebar). Being transparent, the transparent screen lets the user see the content behind it. However, while building it, I have been facing an issue where the transparent div also allows the user to scroll the content behind it.

Expected Results:
I am trying to make the content behind the transparent div static / not scrollable.

Current Code:
Below you can find the current code I use. You will find 2 things.

1. A Sidebar container with a stop propagation function on click
2. A Sidebar

export default function Sidebar() {
  
    return (
        <div className={'sidebar-container'} onClick={ (event) => event.stopPropagation()}>
            <div className={'sidebar'} >
                <header  >header</header>
                <ul>
                    <li>
                        <div className={'sidebar-item'}>item</div>
                    </li>
                </ul>
            </div>
        </div>
    );
}

CodePudding user response：

The easiest way to do this would be to add the content that you want to not scroll to the body tag and set the overflow property to visible. This can be done by using the following style code in the body element:CSS: body { overflow: hidden; } div#container { /* Anything you want in it */ margin-top: 100px; } You can do many things to the content behind the div. You can set the display of the content to block which will allow you to use the overflow property to make the content not scrollable. One more thing, Content inside the transparent div can be scrolled only when it has a scrollbar associated with it. When you set the overflow to scroll (overflow:auto;), then it is added by default. If the content inside transparent div is static, then to avoid scrolling you can use overflow:hidden.