自定义ctrl+鼠标滚轮事件

mousewheel事件

<!-- html里我用的 angular写的，也可以直接在js中监听 mousewheel 方法 -->
<div class="thumbnail-content scroll-bar"
     (mousewheel)="mousewheel($event)"
     (DOMMouseScroll)="mousewheel($event)">
</div>

注意： 鼠标滚轮滚动事件 mousewheel()。但是火狐浏览器不兼容此方法，火狐浏览器的鼠标滚轮滚动事件为 DOMMouseScroll()

mousewheel(event: any) {
   // ctrl键按下了 event.ctrlKey
   if (event.ctrlKey) {
   	// 取消浏览器默认的放大缩小网页行为
     event.preventDefault();
     if (event.wheelDelta < 0 || event.detail < 0) {
       // 鼠标滚轮往下滚动
       ...
     } else if (event.wheelDelta > 0 || event.detail > 0) {
       // 鼠标滚轮往上滚动
       ...
     }
   }
}

注意：谷歌是 event.wheelDelta 大于0向上滚动，小于0向下滚动
火狐是 event.detail 大于0向上滚动，小于0向下滚动