I am using the following library for locking scrolling of the body of page and only allow scrolling on my modal if it is open.
https://www.npmjs.com/package/body-scroll-lock
My modal AddItemModal is a portal so inside index.html file I have this.
<body>
<div id="root"></div>
<div id="add-item-modal"></div>
</body>
NavigationIcons component (where modal is opened)
const NavigationIcons = (props) => {
let targetElement = document.getElementById("add-item-modal");
useEffect(() => {
...
return () => clearAllBodyScrollLocks();
}, []);
const renderAddItemModal = () => {
if (props.addItem) {
disableBodyScroll(targetElement);
return <AddItemModal />;
}
};
return (
<div className="main-4" onClick={() => props.openAddItemModal()}>
{renderAddItemModal()}
</div>
);
}
AddItemModalHeader component (where modal is closed)
const AddItemModalHeader = (props) => {
let targetElement = document.getElementById("add-item-modal");
return (
<div className="modal-header">
add item
<div className="close" onClick={(e) => {
props.handleModalClose(e);
enableBodyScroll(targetElement);
}}>
close
</div>
</div>
)
}
In documentation it is written that targetElement must be the the modal that I want to display. But since the application is rendered inside root div and modal displayed in add-item-modal, shouldn't it be the root instead and apply to it the provided functions such as enableBodyScroll, disableBodyScroll, clearAllBodyScrollLocks. I did try with both root and add-item-modal and in both cases the scrolling does not work on the modal when I test from my iOS device.
The example provided there does not make this clear to me. Could someone explain what am I doing wrong here?
from Locking the body scroll, blocks target element scrolling
No comments:
Post a Comment