Как предотвратить прокрутку страницы при прокрутке элемента DIV?
Я рассмотрел и протестировал различные функции, предотвращающие способность тела прокручиваться, находясь внутри div, и объединил функцию, которая должна работать.
$('.scrollable').mouseenter(function() {
$('body').bind('mousewheel DOMMouseScroll', function() {
return false;
});
$(this).bind('mousewheel DOMMouseScroll', function() {
return true;
});
});
$('.scrollable').mouseleave(function() {
$('body').bind('mousewheel DOMMouseScroll', function() {
return true;
});
});
- Это останавливает всю прокрутку там, где я хочу, чтобы прокрутка оставалась возможной внутри контейнера
- Это также не отключается при отпускании мыши
Есть идеи или лучшие способы сделать это?
1 ответ
просто предложив это, поскольку возможное решение, если Вы не думаете пользователь, будет иметь отрицательный опыт в очевидном изменении. Я просто изменил класс тела переполнения к скрытому, когда мышь была по целевому отделению; тогда я изменил отделение тела на скрытое переполнение, когда мышь уезжает.
Лично я не думаю, что это выглядит плохо, мой код мог использовать переключатель для создания этого инструментом для очистки, и существуют очевидные преимущества для того, чтобы сделать этот эффект возможным без пользователя, являющегося знающим. Таким образом, это - вероятно, ответ hackish-последнего-средства.
//listen mouse on and mouse off for the button
pxMenu.addEventListener("mouseover", toggleA1);
pxOptContainer.addEventListener("mouseout", toggleA2);
//show / hide the pixel option menu
function toggleA1(){
pxOptContainer.style.display = "flex";
body.style.overflow = "hidden";
}
function toggleA2(){
pxOptContainer.style.display = "none";
body.style.overflow = "hidden scroll";
}