鼠标滚轮事件每次滚动会话只触发一次

我试图模仿以下网站的功能：www.verbaasd.net。每个滚动“会话”只会触发一个动作。鼠标滚轮事件每次滚动会话只触发一次

每次用户向下滚动动作都会发生，具体取决于变量计数的状态。我只希望每次滚动都会发生一次。例如，如果用户拥有带触摸板的Macbook，它将多次触发很多次。计数将立即从1到4。有没有办法设置一个超时或什么，所以当变异数计数增加或减少1时，它停止0.5秒？

当前代码：

var count = 1; 

$(window).on('mousewheel DOMMouseScroll', function(e) { 
    if (e.originalEvent.wheelDelta/120 > 0) { 
    count -= 1; 
    } else { 
    count += 1; 
    } 
    if (count < 1) count = 1; 
    if (count > 4) count = 4; 

    switch (count) { 
    case 1: 
     // do something 
     break; 
    case 2: 
     // do something 
     break; 
    case 3: 
     // do something 
     break; 
    case 4: 
     // do something 
     break; 
    } 

    $(".cd-background-wrapper").attr("data-slide", count); 

});

来源

2016-04-09 elw

https://stackoverflow.com/questions/25860108/jquery-page-scroll-event-logic-how-to-throttle – Burimi

https://css-tricks.com/the -throttling-and-debouncing/ –

谢谢！无法让Underscore工作，但lodash工作得很好。谢谢！ – elw

我建议其他的方式。

您应该使用'preventDefault'并使用setTimeout延迟效果。

我在链接下面写了一个简单的原型代码。（仅在浏览器和Safari测试）

http://codepen.io/nigayo/pen/PNEvmY

[HTML]

<body> 
    <div id="wrap"> 
    <section>section A</section> 
    <section>section B</section> 
    <section>section C</section> 
    <section>section D</section> 
    </div> 
</body>

[CSS]

body { 
    overflow: hidden; 
    height: 100%; 
} 

#wrap { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    top: 0; 
} 

section { 
    width: 100%; 
    height: 600px; 
} 

section:nth-child(1) { 
    background: red; 
} 
section:nth-child(2) { 
    background: blue; 
} 

section:nth-child(3) { 
    background: green; 
} 
section:nth-child(4) { 
    background: magenta; 
}

[JavaScript的]

(function() { 
    var currentPanel = 1; 
    var wrap = $('#wrap'); 
    var panelsize = 600; 
    var step = 10; 
    var interval = 1000; 
    var direction = 1; 

    var bAnimation = false; 

    function animation() { 
    setTimeout(function() { 
     var currentTop = parseInt(wrap.css("top")); 

     if (direction < 0) { 
     if (currentTop <= minValue) { 
      setTimeout(function() { 
      bAnimation = false; 
      }, interval); 
      return; 
     } 
     } else { 
     if (currentTop >= minValue) { 
      setTimeout(function() { 
      bAnimation = false; 
      }, interval); 
      return; 
     } 
     } 

     wrap.css({ 
     "top": currentTop - step 
     }); 
     animation(); 
    }, 16); 
    } 

    $(window).bind('mousewheel DOMMouseScroll', function(event) { 
    event.preventDefault(); 
    if (bAnimation) return; 

    var currentTop = parseInt(wrap.css("top")); 

    if (event.originalEvent.wheelDelta < 0) { 
     //down scroll 
     minValue = currentTop - panelsize; 
     step = 10; 
     direction = -1; 
    } else { 
     //up scroll 
     minValue = currentTop + panelsize; 
     step = -10; 
     direction = 1; 
    } 

    console.log(minValue, bAnimation); 
    bAnimation = true; 
    animation(); 
    }); 
})();

如果您引用了我的代码，则应该为动画逻辑使用“jquery动画函数”或“requestAnimationframe”。

来源

2016-04-09 10:12:56 superui

谢谢A. Wolff。使用_.throttle与lodash.js做了诀窍！你可以在这里找到更多的信息：https://css-tricks.com/the-difference-between-throttling-and-debouncing/

来源

2016-04-09 11:03:40 elw

鼠标滚轮事件每次滚动会话只触发一次

回答

相关问题