如何使透明div后面的内容不可滚动/静态

Question

问题：
我正在构建一个侧边栏，它后面有一个深色透明屏幕(单击时会隐藏侧边栏(。透明屏幕是透明的，它可以让用户看到它背后的内容。然而，在构建它的同时，我一直面临着一个问题，即透明div还允许用户滚动它后面的内容。

预期结果：
我正在尝试使透明div后面的内容为静态/不可滚动。

当前代码：
您可以在下面找到我使用的当前代码。你会发现两件事。

1. 点击时具有停止传播功能的边栏容器
2. A边栏

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>
    );
}

Answer 1

最简单的方法是将不想滚动的内容添加到body标记中，并将溢出属性设置为可见。这可以通过在body元素中使用以下样式代码来实现：CSS:body｛overflow：hidden；｝div#container｛/*你想要的任何东西*/margin-top:100px；｝你可以对div后面的内容做很多事情。你可以将内容的显示设置为block，这将允许你使用overflow属性使内容不可滚动。还有一件事，透明div中的内容只有在有滚动条关联的情况下才能滚动。当您将溢出设置为滚动(overflow：auto；(时，默认情况下会添加它。如果透明div中的内容是静态的，那么为了避免滚动，可以使用overflow：hidden。