避免弹出位置上的滚动条:固定
避免弹出位置上的滚动条:固定
提问于 2022-07-13 15:06:38
我有一个边栏，当我点击一个按钮时，它会打开，我把它的位置设置为fixed，这样它就可以像这样占据整个屏幕(我使用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>
)我将其设置为fixed，因为它是一个下面的组件，我需要它来克服应用程序顶部调用的头和另一个侧边栏。
以下是我的应用程序的结构：
function App() {
const AppLayout = () => (
<>
<Header />
<div className="flex">
<Sidebar />
<Outlet />
// the sidebar I'm trying to fix is in Outlet
</div>
</>
);的问题是:当我打开侧边栏(下面)时，它会占用所有的屏幕，但是滚动条会滚动这个侧边栏下的页面，而不是侧边栏中的内容。
知道如何禁用页面的滚动条，并为固定组件启用滚动条吗？
PS :这里有一个沙箱，可以复制问题沙盒 (如您所见，我可以滚动页面，但不能弹出)
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-07-13 16:15:02
正如@iamhuynq在注释中提到的那样，设置一个溢出自动和一个useEffect可以解决这个问题。谢谢！
Stack Overflow用户
发布于 2022-07-13 15:24:43
您可以通过设置禁用页面滚动，打开侧栏时隐藏正文溢出，关闭时删除。还在侧边栏上添加溢出自动
useEffect(() => {
const openSideBar = () => {
document.body.style.overflow = 'hidden';
};
const closeSideBar = () => {
document.body.style.overflow = '';
};
if (isOpenSidebar) openSideBar()
else closeSideBar()
return () => closeSideBar();
}, [isOpenSidebar]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72968533
复制相关文章
相似问题
腾讯云开发者
