js 静止滚轮_JS 控制 鼠标滚轮事件

2017-03-31 回答

我们都见到过这些效果，用鼠标滚轮实现某个表单内的数字增加减少操作，或者滚轮控制某个按钮的左右，上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。先分析原理：我们是通过判断鼠标滚动的获取一个值，然后根据这个值判断滚动的方向。然而不同浏览器有不同的获取方法，所以要分浏览器写方法。 不同浏览器不同的事件 首先，不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel(firefox不支持)和dommousescroll(只有firefox支持)，关于这两个事件这里不做详述，想要了解的朋友请先去了解鼠标滚轮(mousewheel)和dommousescroll事件。过程中需要添加事件监听：兼容firefox采用addeventlistener监听。 js返回数值判断滚轮上下 判断滚轮向上或向下在浏览器中也要考虑兼容性(ie、opera、safari、firefox、chrome)中firefox 使用detail，其余四类使用wheeldelta；两者只在取值上也是不一致，但是含义一致，detail与wheeldelta只各取两个 值，detail只取±3，wheeldelta只取±120，其中正数表示为向上，负数表示向下。 具体的代码如下所示：