logo标签列表

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

javascriptjqueryscrolltouchpad
5

我正在尝试模仿以下网站的功能：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);

});
3
https://stackoverflow.com/questions/25860108/jquery-page-scroll-event-logic-how-to-throttle - Rosmarine Popcorn
1
https://css-tricks.com/the-difference-between-throttling-and-debouncing/ - A. Wolff
谢谢！无法使用Underscore，但是lodash很好用。谢谢！ - elw
我这里有一个答案，不需要整个库。https://dev59.com/DpPea4cB1Zd3GeqP-RSy#34822169 - Donnie D'Amato
2个回答
1

我建议使用另一种方式。

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

我在下面的链接中编写了一个简单的原型代码。 (仅在Chrome和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 animate function”或“requestAnimationframe”进行动画逻辑。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接