Чтобы предотвратить скроллирование при наведении на блок веб-страницы, можно использовать JavaScript для временного отключения прокрутки страницы при нахождении указателя мыши внутри определенного блока. Для этого следует выполнить следующие шаги:
1. Найти блок, на который вы хотите применить данное поведение, и добавить ему обработчики событий для наведения курсора мыши (mouseenter
) и ухода курсора с блока (mouseleave
).
<div id="scrollBlock" style="height: 200px; overflow: auto;"> <!-- Содержимое блока --> </div>
2. Написать JavaScript код, который будет временно блокировать прокрутку страницы при наведении мыши на этот блок.
const scrollBlock = document.getElementById('scrollBlock'); scrollBlock.addEventListener('mouseenter', function() { // Получаем текущее положение прокрутки страницы const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; // Фиксируем положение прокрутки document.body.style.overflow = 'hidden'; document.documentElement.style.position = 'fixed'; document.documentElement.style.top = `-${scrollTop}px`; document.documentElement.style.left = `-${scrollLeft}px`; }); scrollBlock.addEventListener('mouseleave', function() { // Возвращаем прокрутку обратно к исходному состоянию const scrollTop = parseInt(document.documentElement.style.top); const scrollLeft = parseInt(document.documentElement.style.left); document.body.style.overflow = 'auto'; document.documentElement.style.position = ''; document.documentElement.style.top = ''; document.documentElement.style.left = ''; window.scrollTo(0, -scrollTop); });
Таким образом, при наведении курсора мыши на блок scrollBlock
страница будет временно заблокирована от прокрутки. Как только курсор уйдет с блока, прокрутка будет восстановлена в исходное положение.
Пожалуйста, имейте в виду, что это может изменить поведение других элементов на странице, особенно если есть фиксированные элементы или анимации. Рекомендуется протестировать этот код на своем веб-сайте, чтобы убедиться, что он работает корректно в вашем конкретном случае.