JS实现禁用鼠标滚轮事件

应用场景

       JS提供的鼠标滚轮事件使我们能够编写更多有关滚轮事件的特效，比如最近比较流行的"楼梯式滚动"特效，该特效就是通过监听鼠标滚轮事件的方式实现的一种全屏滚动效果，极大的提高了用户体验
    那有的同学就会问了，既然鼠标滚动事件那么牛掰，我们为什么还要禁用掉它呢？那是因为在特殊的场合鼠标滚轮事件反而会给我们开发特效带来麻烦，比如想要实现在浏览器一侧添加一个固定的音乐播放器，每当用户想要更换歌曲滚动到音乐列表底部时，再继续向下滚动鼠标，就会发现整个浏览器的屏幕都会随着向下移动，这样给用户的体验是极差的，这时就会用到禁用鼠标滚轮事件的方式来解决这个难题。

var boxDom = document.getElementById("box");//获取想要在此元素上禁用鼠标滚轮事件的元素ID

/*当页面加载完毕后调用该函数*/
window.onload=disabledMouseWheel();

function disabledMouseWheel() {
  if (document.addEventListener) {
	/**
	 *  给指定的元素添加事件监听
	 *  如想要是整个浏览器都禁用鼠标滚动事件则可以将元素ID替换成document如
	 *  document.addEventListener('DOMMouseScroll', scrollFunc, false);
	 */
		boxDom.addEventListener('DOMMouseScroll', scrollFunc, false);
  }
  /**
   *  如想要是整个浏览器都禁用鼠标滚动事件则可以将其替换成window和document如
   *  window.onmousewheel = document.onmousewheel = scrollFunc;
   */
  boxDom.onmousewheel = boxDom.onmousewheel = scrollFunc;

}
//禁用滚轮事件函数
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;
  }

          将以上代码复制到Script块中，然后将var boxDom = document.getElementById("box")中的box替换成想要禁用滚动事件的元素ID值即可。