在前几天的项目中,场景值如下:
1.动态生成列表,列表高度不固定
2.外面父元素的属性设置为overflow:auto;
3.鼠标移动到列—li中的a上,出现选择列表,鼠标在列表上,列表不消失
4.当鼠标放置到出现的列表上时,再滚动滑轮,因为出现的列表为是根据标签a的位置来进行定位的,所以滚动的时a页面在滚动,但列表位置虽然没变,但与原来a标签相符合的位置却变了
因为父元素overflow的存在,无法使用hover状态,超出的部分会隐藏掉或者会出现跳动的状态。所以就用了如果在a标签上就阻止页面的滚动事件,代码如下。
//阻止浏览器事件
function disabledMouseWheel() {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
document.addEventListener('mousewheel',scrollFunc,false);
}
//取消阻止浏览器事件
function cancelDisMouseWheel(){
document.removeEventListener('DOMMouseScroll',scrollFunc,false);
document.removeEventListener('mousewheel',scrollFunc,false);
}
function scrollFunc(evt) {
evt = evt || window.event;
if(evt.preventDefault) {
// Firefox
evt.preventDefault();
evt.stopPropagation();
} else{
// IE
evt.cancelBubble=true;
evt.returnValue = false;
}
return false;
}
跳动状态如下图
如有疑问,欢迎交流提问