Currently, I am working on a project using NextJS with Tailwind CSS. I am in the process of creating a drawer, popup, and modal with the CSS property position: fixed. However, I have encountered an issue where when I scroll on the fixed elements, the background also scrolls. Even if the fixed element is scrollable, once the scroll ends, the background starts to scroll. How can I prevent this behavior and make the background non-scrollable and clickable?
function Drawer() {
const toggle = useSelector(selectMenu);
const dispatch = useDispatch();
const handleOnClose = (e) => {
if (e.target.id === "container") dispatch(toggleMenu(!toggle));
};
return (
<div
id="container"
onClick={handleOnClose}
className={`md:hidden h-full w-full backdrop-blur-sm fixed ${
!toggle && "hidden"
}`}
>
<div
className={`${
toggle ? " translate-x-0" : "translate-x-full"
} md:hidden fixed h-screen w-3/4 ease-in-out duration-300 bg-white z-50 bottom-0 top-0 right-0 flex flex-col px-4 py-3 space-y-5 shadow-2xl`}
>
<Link
href="/"
className="cursor-pointer flex px-2 space-x-4"
onClick={() => dispatch(toggleMenu(!toggle))}
>
<HomeModernIcon className="h-6 w-6 text-black" />
<h1>Dashboard</h1>
</Link>
<div className=" h-[1px] w-full bg-gray-600" />
<Link
href="/clients"
className="cursor-pointer flex px-2 space-x-4"
onClick={() => dispatch(toggleMenu(!toggle))}
>
<TruckIcon className="h-6 w-6 text-black" />
<h1>Clients</h1>
</Link>
<div className=" h-[1px] w-full bg-gray-600" />
<Link
href="/employee"
className="cursor-pointer flex px-2 space-x-4"
onClick={() => dispatch(toggleMenu(!toggle))}
>
<PuzzlePieceIcon className="h-6 w-6 text-black" />
<h1>Employee</h1>
</Link>
<div className=" h-[1px] w-full bg-gray-600" />
<Link
href="/services"
className="cursor-pointer flex px-2 space-x-4"
onClick={() => dispatch(toggleMenu(!toggle))}
>
<WrenchIcon className="h-6 w-6 text-black" />
<h1>Services</h1>
</Link>
</div>
</div>
);
}