当鼠标悬停在绝对div上时,jQuery禁用滚动
当鼠标悬停在div上时,我试图禁用窗口鼠标滚动功能,以便只启用div滚动,当鼠标离开div时,再次应用到窗口的滚动。div的位置绝对正确 我看过这篇文章,但它似乎没有提供任何答案-因此我的问题 我假设是这样的(如果只有这些方法存在的话):当鼠标悬停在绝对div上时,jQuery禁用滚动,jquery,scroll,mouseover,Jquery,Scroll,Mouseover,当鼠标悬停在div上时,我试图禁用窗口鼠标滚动功能,以便只启用div滚动,当鼠标离开div时,再次应用到窗口的滚动。div的位置绝对正确 我看过这篇文章,但它似乎没有提供任何答案-因此我的问题 我假设是这样的(如果只有这些方法存在的话): 您不能禁用窗口滚动,但有一个简单的解决方法: //set the overflow to hidden to make scrollbars disappear $('#container').hover(function() { $("body").
您不能禁用窗口滚动,但有一个简单的解决方法:
//set the overflow to hidden to make scrollbars disappear
$('#container').hover(function() {
$("body").css("overflow","hidden");
}, function() {
$("body").css("overflow","auto");
});
请参见演示:
更新 不过,您可以禁用鼠标滚轮
$('#container').hover(function() {
$(document).bind('mousewheel DOMMouseScroll',function(){
stopWheel();
});
}, function() {
$(document).unbind('mousewheel DOMMouseScroll');
});
function stopWheel(e){
if(!e){ /* IE7, IE8, Chrome, Safari */
e = window.event;
}
if(e.preventDefault) { /* Chrome, Safari, Firefox */
e.preventDefault();
}
e.returnValue = false; /* IE7, IE8 */
}
来源:
演示:这是一个很受欢迎的问题,因此我现在更新一下,概述一下这里提供的答案,哪些答案可能最适合您。包括三种独特的解决方案。两个来自阿莫斯,一个来自我自己。然而,每一种操作方式都不同
溢出:隐藏在正文上。这很简单,效果很好。但是主窗口的滚动条会在屏幕上来回闪烁
- 捕获当前元素上的滚动事件
- 取消滚动事件
- 仅手动滚动当前元素
- FF支持
- scrollTo null check可在发生意外情况时还原为默认行为
- 对jQuery1.7的支持
var elem = document.getElementById ("container");
if (elem.addEventListener) {
elem.addEventListener ("mousewheel", stopWheel, false);
elem.addEventListener ("DOMMouseScroll", stopWheel, false);
}
else {
if (elem.attachEvent) {
elem.attachEvent ("onmousewheel", stopWheel);
}
}
我在这里试图用我的代码做的是:
- 检查div是否悬停在上方或鼠标悬停在上方
- 获取滚动方向
- 将ScrollTop与容器的高度进行比较,并在达到最大值或最小值时防止进一步滚动(直到鼠标悬停)
var hover_over=false; 变量悬停控制; onCrtlMouseEnter(crtl){//函数具有用于多控件的相同功能 悬停的_over=true;//可以替换为$(control).onMouseCenter()等 悬停的_control=crtl;//您可以命名它 } 功能onCrtlMouseLeave(crtl){ 悬停在上方=错误; 悬停的_控件=null; } $(文档).on(“鼠标滚轮”,函数(e) { 如果(悬停在上方==true){ var-control=$(悬停的_-control);//获取控件 var direction=e.originalEvent.wheelDeltaY;//获取滚动方向 如果(方向<0){ if((control.scrollHeight-control.clientHeight)==control.scrollTop){ 返回false;//达到最大向下滚动…防止; } } 否则,如果(方向>0){ 如果(control.scrollTop==0){ 返回false;//已达到最大值向上滚动…防止; } } } });
(control.scrollHeight-control.clientHeight)
这部分对我来说有点可疑,但你应该知道如何解决这个问题。我在页面上使用了nicesroll,但没有任何方法有效。我意识到nicescroller正在调用scroll事件,在悬停元素时必须临时禁用nicescroll
解决方案:悬停元素时暂时禁用滚动
$('body').on('mouseover', '#element', function() {
$('body, html').css('overflow', 'auto').getNiceScroll().remove();
}).on('mouseout', '#element', function() {
$('body, html').css('overflow', 'hidden').niceScroll();
});
@谢尔曼先生的回答几乎对我起了作用,但有一个问题
我很难理解你的问题,这不是默认行为吗?当你将鼠标悬停在一个“div”上,而你有“overflow:scroll”按钮时,它只会滚动“div”,换言之,它会滚动窗口,或者你是在试图使它这样做,例如,当它完成滚动时,它仍然不会滚动窗口?我怀疑他正是在追求你所描述的。他绝对定位的div会滚动,但当它完成滚动时,他不希望主窗口滚动。在编辑wordpress帖子时,这一直困扰着我。一切都从屏幕上飞走了。在编辑器中工作时,如果您的工作保持不变,那就太好了!是的-这正是我的意思-谢谢@mrtsherman澄清这一点。@kunigami-我找出了错误并更新了我的答案
e.wheelDelta
在jQuery1.7中被删除,因此我必须通过orginalEvent
来访问它。这里有一个类似的解决方案,使用纯JS事件而不是jQuery事件:@mrtsherman首先,谢谢你的回答。但是不要从JSFIDLE复制paster。上述代码将导致webkit中出现意外的非法令牌,该令牌包含一些无效(不幸的是不可见)字符。请参阅。谢谢!在Chrome、Safari、Firefox和IE9中,这对我来说很有魅力。谢谢。在Chrome、Firefox、IE9/8/7中运行良好。在webkit中获取了非法的意外标记,并通过在Notepadd++中粘贴代码段修复了它,删除了隐藏的“?”字符,并将代码复制粘贴到Visual Studio中。它工作正常,并且在div背景透明时出现问题。请告诉我如何修复该问题。
var elem = document.getElementById ("container");
if (elem.addEventListener) {
elem.addEventListener ("mousewheel", stopWheel, false);
elem.addEventListener ("DOMMouseScroll", stopWheel, false);
}
else {
if (elem.attachEvent) {
elem.attachEvent ("onmousewheel", stopWheel);
}
}
var hovered_over = false;
var hovered_control;
function onCrtlMouseEnter(crtl) { //Had same thing used for mutliple controls
hovered_over = true; //could be replaced with $(control).onmouseenter(); etc
hovered_control = crtl; //you name it
}
function onCrtlMouseLeave(crtl) {
hovered_over = false;
hovered_control = null;
}
$(document).on("mousewheel",function(e)
{
if (hovered_over == true) {
var control = $(hovered_control); //get control
var direction = e.originalEvent.wheelDeltaY; //get direction of scroll
if (direction < 0) {
if ((control.scrollHeight - control.clientHeight) == control.scrollTop) {
return false; //reached max downwards scroll... prevent;
}
}
else if (direction > 0) {
if (control.scrollTop == 0) {
return false; //reached max upwards scroll... prevent;
}
}
}
});
$('body').on('mouseover', '#element', function() {
$('body, html').css('overflow', 'auto').getNiceScroll().remove();
}).on('mouseout', '#element', function() {
$('body, html').css('overflow', 'hidden').niceScroll();
});
preventScrollingEl = document.getElementById("WHATEVER");
preventScrollingEl.addEventListener('mousewheel', preventScrolling, {passive: false});
preventScrollingEl.addEventListener('DOMMouseScroll', preventScrolling, {passive: false});
function preventScrolling(event) {
var scrollTo = null;
if (event.type == 'mousewheel') {
scrollTo = (event.wheelDelta * -1);
} else if (event.type == 'DOMMouseScroll') {
scrollTo = 40 * event.detail;
}
if (scrollTo) {
event.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
}