useScroll

Хук для ручного управления позицией прокрутки, даже при активной блокировке через useScrollLock. Позволяет реализовывать пользовательскую прокрутку фона под модальными окнами.

Обязательные условия

Возвращаемое значение

Объект с методами:

Метод	Тип	Описание
`getScroll`	`(options?: GetScrollOptions) => { x: number; y: number }`	Возвращает текущие координаты прокрутки
`scrollTo`	`(x?: number, y?: number) => void`	Прокручивает к указанным координатам

Практический пример

// Главный компонент приложения
const App = () => {
  const [isModalOpen, setIsModalOpen] = React.useState(false);
  const { scrollTo, getScroll } = useManualScroll();
 
  // Прокрутка фона на 100px вниз
  const scrollBackground = () => {
    const currentY = getScroll().y;
    scrollTo(0, currentY + 100);
  };
 
  return (
    <>
      <button onClick={() => setIsModalOpen(true)}>Открыть модалку</button>
 
      {isModalOpen && (
        <PopoutWrapper>
          <div>
            <button onClick={scrollBackground}>Скроллить фон ↓</button>
            <button onClick={() => setIsModalOpen(false)}>Закрыть</button>
          </div>
        </PopoutWrapper>
      )}
    </>
  );
};
 
const Example = () => (
  <AppRoot>
    {/* или scroll="contain" */}
    <App />
  </AppRoot>
);
 
<Example />;

Параметр `scroll` в `AppRoot`

В зависимости от значения свойства scroll компонента AppRoot меняется поведение useScroll:

`scroll`	Поведение
`"contain"`	Управляет прокруткой внутреннего контейнера приложения.
`"global"`	Работает с глобальной полосой прокрутки окна браузера.

Использование с блокировкой прокрутки

const Modal = () => {
  const [opened, setOpened] = useState(false);
 
  // Блокируем прокрутку при открытии
  useScrollLock(opened);
 
  // Получаем доступ к ручному управлению
  const { scrollTo, getScroll } = useManualScroll();
 
  // Пользовательская прокрутка фона
  const handleScroll = () => scrollTo(0, getScroll() + 200);
 
  return <>{/* Код компонента */}</>;
};

usePatchChildren

useScrollLock