|
Вопросы по темеjavascript блок |
Keyword: 15
Here's the solution using JavaScript:
const block = document.querySelector('.your-block-class'); // Replace with your block's class block.addEventListener('mouseover', () => { document.body.style.overflow = 'hidden'; // Prevent scrolling on hover }); block.addEventListener('mouseout', () => { document.body.style.overflow = 'auto'; // Allow scrolling again on mouseout });
This code prevents scrolling when you hover over the block with the class
.your-block-classand allows scrolling again when you mouseout.
На странице есть блок с собственным скроллингом (реализован без JS плагинов). Проблема в том, что когда пользователь долистывает прокрутку в блоке до конца, если и дальше крутить колесико, начинает скроллиться вся страница. Как заставить браузер "тормозить" по достижении конца блока и не скроллить дальше?
Решения через добавление в нужный момент телу сайта свойств:
overflow: hidden;
или:
position: fixed;
width: 100%;
overflow-y: scroll;
мне не подходят. Причина в том, что в обоих случаях место, где находится полоса прокрутки, визуально изменяется, что привлекает внимание пользователя. Ранее сталкивался с одним JS плагином для создания кастомных полос прокрутки, в нем данная проблема была устранена. Подозреваю, что это можно сделать не слишком громоздко, а главное - чтобы было кроссбраузерно.
В том самом плагине скорее всего использовалось именно overflow: hidden;, ведь плагин сам реализует сколлинг.
Вернемся к проблеме. Единственный способ который мне приходи на ум, реализовать простой аналог системной прокрутки, но не отправлять событие прокрутки к родителю.
HTML:
CSS:
.non-scroll{
height: 2000px;
background-color: green;
}
.scroll{
height: 300px;
overflow: auto;
background-color: blue;
}
.other-stuff{
height: 2000px;
}
JS:
var scroll = document.getElementById("scroll");
scroll.addEventListener("mousewheel", function(e) {
this.scrollTop -= (e.wheelDeltaY || (e.originalEvent && (e.originalEvent.wheelDeltaY || e.originalEvent.wheelDelta)) || e.wheelDelta || 0);
e.stopPropagation();
e.preventDefault();
});
По моему личному мнению это очень плохая идея, жертвовать нативным скроллом ради избавления от этого небольшого "прыжка". Однако я сомневаюсь что существуют способы проще.
Все подобные вопросы на английском SO. Так же приходят к довольно костыльным решениям.
В любом случае, вот: живое демо
|
|
|
|