Question

好的，所以我要做的是有一个页面，其面板的宽度和高度均为100％。

<body>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
</body>

身体将溢出：隐藏。我想要做的是每次用户滚动一定量，让我们说一下滑动或半轮旋转，然后滚动到下一个面板。所以它就像一个甲板，将下一个元素带入视口。

我处理它的方式是这样的：但是我无法找到一种不使滚动功能发射数百万次的方法。

这是我的JS：丑陋我也在使用鼠标滚轮插件..我想某种方式对于每个x delta量，然后它会触发滚动动画。但我真的不确定如何实现它！

var scrollAmt = 0;
        $(window).on('mousewheel', function(event, deltaY){
            $('.projects').addClass('scrolled');
            if(event.originalEvent.wheelDelta > 0) {
                //down  
                    scrollAmt = scrollAmt -= $winHeight;
                    console.log(scrollAmt);
                    $('.projects').animate({marginTop: ''+ scrollAmt +'px'}, 2000);

            } else {
                if ($totalComputed === scrollAmt ){
                    console.log('last');
                } else {

                        scrollAmt = scrollAmt += $winHeight;
                        console.log(scrollAmt);
                        $('.projects').stop().animate({marginTop: '-'+ scrollAmt +'px'}, 2000);

                }
            }
        });

我尝试过使用if和else语句，但我最终只是在第一个方面。

我正在努力实现类似http://mirkoborsche.com

的目标

非常感谢任何帮助！

最佳，

Answer 1

我认为您可以使用此插件完成工作：https://github.com/alvarotrigo/fullPage.js。

此外，它似乎正在积极更新。最后一次对回购的承诺是在3天前完成的。

干杯！

Answer 2

取消绑定并重新绑定滚动事件，以确保在某些时间内不会触发滚动事件：

模式是这样的：

$(window).on('mousewheel', processMouse(event, deltaY);

function processMouse(event, deltaY){

    if(event.originalEvent.wheelDelta > 0) {
        // Unbind the mousewheel event
        $(window).off("mousewheel");
        // Do some things like scrolling the page to the next waypoint
    } else {
        // Rebind the mousewheel event
        $(window).on('mousewheel', processMouse(event, deltaY);
    }
}

jQuery窗口滚动捕捉

2 个答案: