Question

这里的第一个问题，希望你们能提供帮助！我更像是一个艺术家而不是编码员，所以我完全迷失在这里。

原来如此！我想做的就是这个。

我正在设置一个页面，其中有一个500％高的div。它包含5个高度均为20％的div，给我5个div，它们的大小适合任何屏幕。以下是关于jFiddle的示例：（http://jsfiddle.net/NwUvV/3/）

BUT。

我需要的是我的鼠标滚轮在用户滚动时完美滚动到每个div。在用户滚动鼠标滚轮时，页面移动到div＃2（无论是锚点还是ID，无论如何）。我不想要的是人们能够在屏幕上拥有一半的div 1和div的一半2.这只是丑陋的。

这是此处网站的示例：http://www.beoplay.com/Products/BeoplayA9?utm_source=bang-olufsen.com&utm_medium=referral&utm_campaign=Bang-Olufsen.com%2BProduct%2BPage&utm_term=EXPERIENCE%2BA9&utm_content=BeoPlay%2BA9%2B%3A%2BAll#at-a-glance

了解如何使用鼠标滚轮，它将为您带来完美的下一个div？看起来它锁定在一个锚上并顺利滚动到它，不是吗？

你们有机会帮忙吗？

提前多多谢谢！

杰夫

Answer 1

你去男人！查看此处的示例EXAMPLE

var tempScrollTop = 0;
var currentScrollTop = 0;
var scrollHeight = $(window).height();
var newHeight = 0;


function scrollIt() {

$(window).off('scroll', scrollIt);

    currentScrollTop = $(window).scrollTop();


    if (tempScrollTop < currentScrollTop) {
       newHeight = newHeight + scrollHeight;
       $('html').animate({scrollTop: newHeight}, 500, function(){
             var setScroll = setTimeout(function(){
                console.log('Animation Complete');
                tempScrollTop = $(window).scrollTop();
                $(window).on('scroll', scrollIt);
            }, 10);
        }); 

    } else if (tempScrollTop > currentScrollTop){
       newHeight = newHeight - scrollHeight;
       $('html').animate({scrollTop: newHeight}, 500, function(){
             var setScroll = setTimeout(function(){
                console.log('Animation Complete');
                tempScrollTop = $(window).scrollTop();
                $(window).on('scroll', scrollIt);
            }, 10);
        }); 
    }


}

$(window).on('scroll', scrollIt);

Answer 2

不确定你是否最终得到了这个想法，但我想我会在那里举一个例子......

最终我们需要拦截滚动事件并确定用户滚动的方式。

一旦我们知道了哪个方向，我们就可以使用活动索引的存储变量，并根据活动元素的偏移量为主体设置动画。

// setup active index variable
var index = 0;
//  we will use this to determine scroll direction
var lastTop = 0;

$( window ).on( 'scroll', function( ev ) {
    // get the current top offset
    top = $( window ).scrollTop();
    // Determine direction
    if ( top > lastTop ) { 
        // down
        index++
        // handle animation
    } else {
        // up
        index--
        // handle animation
    }
    // update lastTop for next interaction
    lastTop = top;

}

代码本身应该被评论到足以了解正在发生的事情，但如果您需要任何进一步的帮助或有任何问题，请告诉我。

请参阅此处的完整示例 http://jsfiddle.net/NwUvV/71/

可以使用一些清理来帮助进行转换（可能是带回退的css3）等等，但希望它可以解决问题，你可以从那里拿走它。

包含的代码将考虑可变大小的元素，如果需要，请检查css中的注释。

Answer 3

使用jQuery的mousewheel插件，可以检测滚动的方向，在滚动开始时设置变量并返回false;滚动完成后，您可以触发自己的动画，以便在检测到滚动事件的方向上滚动窗口。

你可以按照VIDesignz的要求设置一个小提琴，以便可以用上面提到的例子创建一个版本吗？

鼠标滚动到锚点

3 个答案: