I have integrated a Modal component into my Next.JS application, and I have implemented a functionality to close the modal when the user scrolls outside of it. However, this effect is also triggering when the user scrolls inside the modal. How can I modify it to only close when scrolled outside but not inside?
function HomeFilterModal({ visible, onClose }) {
const toggle = useSelector(selectModal);
const dispatch = useDispatch();
const handleOnClose = (e) => {
if (e.target.id === "container") onClose();
};
useEffect(() => {
const handleScroll = () => {
if (window.scrollY >= 10) {
onClose();
}
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
if (!visible) return null;
return (
<div
id="container"
onClick={handleOnClose}
className="fixed top-24 bottom-0 left-0 right-0 bg-black bg-opacity-30 backdrop-blur-sm h-screen z-50 hidden sm:flex justify-center "
>
<div
id="nonscroll"
className="h-[28rem] w-2/3 bg-[#fafaf9] drop-shadow-md rounded-3xl flex flex-col items-center overflow-hidden overflow-y-scroll scrollbar-none snap-y
"
>
<div className="flex items-center justify-between w-full px-4 py-4 border-b">
<div
onClick={() => dispatch(setModal(!toggle))}
className="rounded-full border h-8 w-8 border-gray-600 hover grid place-items-center hover:border-0 hover:drop-shadow-2xl hover:shadow-black"
>
<XMarkIcon className="h-4 w-4" />
</div>
<p className="text-2xl tracking-wider">Filter</p>
<p
onClick={() => dispatch(resetFunc())}
className="text-sm hover:underline pr-2 cursor-pointer"
>
Clear All
</p>
</div>
<HomePriceFilter />
<HomeLocationFilter />
<HomeTypeFilter />
{/* <div className="py-6 h-48 bg-white w-full text-transparent">hey</div> */}
</div>
</div>
);
}
export default HomeFilterModal;