Получить профессию в SkyproДеактивация прокрутки в JavaScript с jQuery: scrollTo
Быстрый ответ
Чтобы остановить прокрутку страницы, задайте свойство overflow: hidden элементу <body>:
document.body.style.overflow = 'hidden'; // "Сейчас прокрутка прервется!"
document.body.style.overflow = ''; // "Продолжаем прокрутку!"Таким способом вы сможете отключить и восстановить прокрутку, не трогая при этом другие элементы навигации, например, комбинации клавиш или переходы по якорям.
Подробные инструкции
Управление прокруткой на мобильных устройствах
Для блокировки прокрутки на устройствах с сенсорным отображением, следует обрабатывать события touchmove:
const preventDefault = (e) => e.preventDefault();
const disableScroll = () => document.addEventListener('touchmove', preventDefault, { passive: false }); // "Никакой прокрутки!"
const enableScroll = () => document.removeEventListener('touchmove', preventDefault, { passive: false }); // "Продолжаем прокрутку!"
disableScroll(); // Прокрутка отключена
enableScroll(); // Прокрутка включенаВажно: установите { passive: false }, чтобы гарантировать отмену действия по умолчанию при касании.
Запоминание позиции прокрутки
Важно сохранить положение прокрутки при её переключении. Вот как это делается:
let scrollPosition = 0;
const disableScroll = () => {
scrollPosition = window.pageYOffset; // Запоминаем текущую позицию!
document.body.style.overflow = 'hidden';
document.body.style.position = 'fixed'; // Фиксируем положение!
document.body.style.top = `-${scrollPosition}px`; // Держим в уме позицию
};
const enableScroll = () => {
document.body.style.overflow = '';
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, scrollPosition); // Возвращаемся на сохраненную позицию!
};Имитация полосы прокрутки
Чтобы интерфейс не смещался при исчезновении прокруточной полосы, создайте её подделку:
const scrollbarWidth = window.innerWidth – document.documentElement.clientWidth;
document.body.style.overflow = 'hidden';
document.body.style.paddingRight = `${scrollbarWidth}px`; // Создаем видимость полосы прокруткиПродвинутые приёмы
Динамическое управление переполнением содержимого
Для динамического управления переполнением, например, во время анимаций или переходов, настройте следующий подход:
function afterAnimation() {
document.body.style.overflow = 'auto'; // "Анимация закончена, можем продолжить!"
}
// Запускаем анимацию и восстанавливаем прокрутку в конце
myAnimation().then(afterAnimation);Совместимость с устаревшими браузерами
В старых браузерах, таких как IE6, могут потребоваться особые методы управления прокруткой:
// Для IE6
window.onload = function() {
document.body.scroll = "no"; // "В IE6 прокрутку мы отменяем!"
};Обязательно тестируйте решения в разных браузерах и на разных устройствах, чтобы убедиться в их правильной работе.
Визуализация
Пошаговое иллюстрированное руководство по временному блокированию прокрутки:
Исходное состояние страницы: 📄🔄👈 (Прокрутка включена)
Действие: 🚫✋ (Стоп! Прекращаем прокрутку!)
Результат: 📄✋ (Прокрутка отключена)Жаргонное сравнение: это как если бы у полосы прокрутки была кнопка паузы:
// Чтобы приостановить прокрутку:
document.body.style.overflow = 'hidden'; // 📄⏸️
// Чтобы продолжить прокрутку:
document.body.style.overflow = ''; // 📄⏯️Дополнительные соображения
Избежание "цепной" прокрутки
При использовании вложенных элементов с прокруткой полезно применить CSS-свойство overscroll-behavior для предотвращения цепной прокрутки:
.scrollable-element {
overscroll-behavior: contain; // "Твое распространение останавливается здесь", – сообщает элемент прокрутке
}Вопросы производительности
Учтите, что блокирование прокрутки может негативно повлиять на взаимодействие пользователя с сайтом и производительность в целом. Используйте этот метод с должным рассмотрением, вспоминая о доступности и удобстве пользования.
Полезные материалы
- Метод Event: preventDefault() – Веб API | MDN — Информация о блокировке стандартных событий в JavaScript.
- javascript – Как временно отключить прокрутку? – Stack Overflow — Обсуждение специалистов и сообщества по проблеме отключения прокрутки.
- overflow | CSS-Tricks – CSS-Tricks — Изучение свойства overflow и его сильного влияния на прокрутку.
- Вам может не понадобиться jQuery — Показаны альтернативы функциональности jQuery на чистом JavaScript.
- События касания – Веб API | MDN — Анализ проблем, возникающих при работе с событиями касания в веб-разработке.
- WheelEvent – Веб API | MDN — Документация, с помощью которой вы можете осмыслить интерфейс WheelEvent.