鼠标滚动到锚点

Question

这里的第一个问题，希望你们能帮助！比起程序员，我更像是一个艺术专家，所以我完全迷失在这里。

所以！我想做的就是这个。

我正在设置一个具有 500% 高的单个 div 的页面。它包含 5 个 20% 高的 div，为我提供了 5 个大小适合任何屏幕的 div。以下是关于 jFiddle 的示例：(http://jsfiddle.net/NwUvV/3/)

但是。

我需要的是让我的鼠标滚轮在用户滚动时完美地滚动到每个 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的鼠标滚轮插件，可以检测滚动方向，设置滚动开始时的变量并返回false；滚动完成后，您可以触发自己的动画，以检测到滚动事件的方向滚动窗口。

您能否按照 VIDesignz 的要求设置一个小提琴，以便可以使用上述示例创建一个版本？