在前几天的项目中,场景值如下:
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; }
跳动状态如下图
如有疑问,欢迎交流提问