Невозможно заморозить прокрутку после установки body.overflow скрытым в Next Js
У меня возникла эта проблема в моем Nextjs, где я не могу заморозить прокрутку страницы даже после того, как я установил document.body.style.overflow на hidden.
Как вы видете: В строках 11-14, где я нажимаю кнопку заморозки, прокрутка отключается. введите здесь описание изображения
Результат: Страница по-прежнему прокручивается.
Пожалуйста, дайте мне знать решение этой проблемы.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно добавить position:fixed в дополнение к overflow:hidden
document.body.style.cssText = "overflow: hidden; position:fixed;";
Предотвращение прокрутки приведет к потере позиции прокрутки. Таким образом, когда прокрутка снова включена, она сбрасывает положение прокрутки в верхнюю часть страницы, а не в то место, где остановился пользователь. Чтобы предотвратить это, вам нужно установить положение scrollTop.
const scrollTop = (document.documentElement || document.body).scrollTop;
document.body.style.cssText = `overflow: hidden; position:fixed; margin-top: -${scrollTop}px;`; // add here to prevent shifting content on freeze
При разморозке установите верхнее значение прокрутки на исходное значение верхнего прокрутки до заморозки. Сохраните его в состоянии или переменной, чтобы его можно было использовать позже.
const scrollTop = (document.documentElement || document.body).scrollTop; // original value to store in state or variable before freezing.
//After unfreezing, set back to original value
document.documentElement.scrollTop = scrollTop;
document.body.scrollTop = scrollTop;
Я добавил немного больше деталей в конце.
Большое спасибо, это сработало для меня сейчас. Но когда я размораживаю его, он возвращается наверх, как мне настроить его, чтобы он прокручивался до того места, где я его заморозил?