useScrollLock
Хук для блокировки прокрутки страницы. Полезен при открытии модальных окон или всплывающих элементов, которые требуют ограничения взаимодействия с фоном.
Обязательные условия
Особенности
- Блокировка устанавливается на тег
html. - Блокировка автоматически снимается при размонтировании компонента.
- Поддерживается вызов нескольких
useScrollLock(прокрутка страницы будет неактивна, пока все всплывающие элементы не будут закрыты).
Пример использования
const App = () => {
const [opened, setOpened] = React.useState(false);
// Блокируем полосу прокрутки при открытии всплывающего окна
useScrollLock(opened);
return (
<div>
<h1>My Awesome App</h1>
<label htmlFor="toggle">Toggle popout</label>
<input
id="toggle"
type="checkbox"
checked={opened}
onChange={(e) => setOpened(e.target.checked)}
/>
{opened && <PopoutWrapper>Some content</PopoutWrapper>}
</div>
);
};