как деактивировать прокрутку в javascript с использованием jquery и scrollto
Один из самых простых способов деактивировать прокрутку — использовать CSS. Вы можете установить стиль для body
, который предотвращает прокрутку:
body {
overflow: hidden; /* Отключает прокрутку */
}
Однако этот подход работает хорошо лишь для статических страниц. Если вам нужно динамически управлять прокруткой, стоит использовать JavaScript/jQuery.
$(document).on('mousewheel DOMMouseScroll', function(event) {
event.preventDefault(); // Предотвращает действие по умолчанию (прокрутку)
});
В этом коде мы предотвращаем прокрутку с помощью event.preventDefault()
, помещая обработчик на события mousewheel
и DOMMouseScroll
.
Если вы хотите временно заблокировать прокрутку, например, когда открывается модальное окно, вы можете использовать комбинацию кода:
function disableScroll() {
$(document).on('mousewheel DOMMouseScroll', function(event) {
event.preventDefault();
);
$('body').css('overflow', 'hidden'); // Также отключаем scrollbar
}
function enableScroll() {
$(document).off('mousewheel DOMMouseScroll');
$('body').css('overflow', ''); // Восстанавливаем scrollbar
}
// Пример использования
$('#openModal').on('click', function() {
disableScroll(); // Деактивируем прокрутку
$('#modal').fadeIn(); // Открываем модальное окно
});
$('#closeModal').on('click', function() {
enableScroll(); // Активируем прокрутку
$('#modal').fadeOut(); // Закрываем модальное окно
});
```
Если вы используете библиотеку ScrollTo и хотите временно убрать прокрутку, вы можете просто блокировать прокрутку через обработчик событий, как показано в предыдущих примерах. Однако если вам нужно реализовать анимацию прокрутки с помощью ScrollTo, сделайте это так:
```javascript
$('#scrollButton').on('click', function() {
$.scrollTo('#target', {
duration: 1000,
onAfter: function() {
console.log('Прокрутка завершена.'); // Действия после прокрутки
}
});
});
Здесь scrollButton
— это кнопка, по нажатию на которую произойдет анимация прокрутки к элементу с id target
. Учтите, что использование $.scrollTo
влияет на позицию прокрутки, поэтому до этого вы всё же можете отключить прокрутку, используя вышеописанные методы.