当鼠标悬停在子元素上时不滚动主体
问题描述:
我试图在用户使用下面的代码敲击页面的两个特定部分的底部时停止滚动主页面,但它停止了鼠标滚轮的工作在那些divs。当鼠标悬停在子元素上时不滚动主体
var scroller = document.querySelector('#Filters');
scroller.addEventListener('wheel', listener);
function listener(event)
{
var elem = event.currentTarget;
if ((event.deltaY < 0 && elem.scrollTop === 0) ||
(event.deltaY > 0 && elem.offsetHeight + elem.scrollTop >= elem.scrollHeight))
{
event.preventDefault();
}
else if ((event.deltaX < 0 && elem.scrollLeft === 0) ||
(event.deltaX > 0 && elem.offsetWidth + elem.scrollLeft >= elem.scrollWidth))
{
event.preventDefault();
}
}
答
您可以使用比重新计算js中的滚动更有效的解决方案,在滚动子元素时禁用滚动身体。
HTML:
<div onmouseover="disableScroll();" onmouseout="enableScroll();">
content
</div>
JS:
var body = document.getElementsByTagName('body')[0];
function enableScroll() {
body.style.overflowY = 'auto';
}
function disableScroll() {
body.style.overflowY = 'hidden';
}
这是完美的,除了我有一些内容时滚动条消失,页面变宽移动。 –
如果其他人使用这种解决方案,并且存在右对齐元素移动的问题,我使用'function enableScroll()body.style.overflowY ='auto'; $('body')。css({width:'100%'}); $('body')。css({float:'none'}); 。 \t \t \t } \t功能disableScroll(){ \t \t变种bodyWidth = $( “正文”)宽(); \t \t body.style.overflowY ='hidden'; $('body')。css({width:bodyWidth +'px'}); $('body')。css({float:'left'}); “为了补救它。 –