JS阻止浏览器滚动事件

在前几天的项目中，场景值如下： 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;
}

跳动状态如下图

如有疑问，欢迎交流提问