mac本的触控板多次触发滚轮事件,为什么?

书生百步颠
  • 3
新手上路,请多包涵

监听滚轮事件进行整屏翻动动画,我用mac本的触摸板,当滑动的快的时候,会多次触发我的动画,但是我的每个滚动都有开关,动画开始,开关关闭;动画完毕,开关打开,开始接受下一个滚动动画;在监听滚轮滚动事件时,我只是监听了他的滚动方向,返回值为正负,来判断是向上还是向下滑,并没有监听他的滚动速度,即使mac本上的滚动速度不恒定,但正负是不变的 ,我只监听了他的正负,但出现以上问题,不知道问题在哪?正常浏览器没有问题。下面是监听滚轮滚动方向兼容各浏览器的函数,求大神解答

window.onload = function () {
        var oDiv = document.getElementById('div1');
 
        function onMouseWheel(ev) {/*当鼠标滚轮事件发生时,执行一些操作*/
            var ev = ev || window.event;
            var down = true; // 定义一个标志,当滚轮向下滚时,执行一些操作
                down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
            if(down){
                oDiv.style.height = oDiv.offsetHeight+10+'px';
            }else{
                oDiv.style.height = oDiv.offsetHeight-10+'px';
            }
            if(ev.preventDefault){/*FF 和 Chrome*/
                ev.preventDefault();// 阻止默认事件
            }
            return false;
        }
        addEvent(oDiv,'mousewheel',onMouseWheel);
        addEvent(oDiv,'DOMMouseScroll',onMouseWheel);
     }
    function addEvent(obj,xEvent,fn) {
        if(obj.attachEvent){
            obj.attachEvent('on'+xEvent,fn);
        }else{
            obj.addEventListener(xEvent,fn,false);
        }
    }
评论
阅读 3.4k
3 个回答

javascript - fullpage.js滑轮上下滚动较快的时候屏幕就会乱窜。 - SegmentFault 思否
https://segmentfault.com/q/10...

这个问题基本能解决, 但还不够完美, 可以看看

布吉岛
  • 5
新手上路,请多包涵

这个可以使用节流函数处理,可以使用现成的工具lodash中的throttle方法,示例如下:

// { 'trailing': false }调用在节流结束后,默认为true,即表示允许在 wait 期间多次调用
        window.addEventListener(mousewheelevt, _.throttle(this.handleScroll, 1200, { 'trailing': false }), false)

文档地址:http://lodash.think2011.net/t...

zilan830
  • 4
新手上路,请多包涵

我现在也遇到了这个问题。也在找答案。你找到答案了吗

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏