2

好的，所以我想要做的是有一个页面，其面板跨越 100% 的宽度和高度。

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

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

我处理它的方式是这样的：但我想不出一种不让滚动功能​​触发一百万次的方法。

这是我的 JS：丑陋的我也在使用鼠标滚轮插件。但我不确定如何实现它！

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

非常感谢任何帮助！

最好的，

4

2 回答 2

1

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

此外，它似乎正在积极更新。对 repo 的最后一次提交是在 3 天前进行的。

干杯!

于 2013-10-14T08:25:38.240 回答
0

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

模式是这样的：

$(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);
    }
}
于 2013-03-04T14:05:54.703 回答