0

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

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

我正在设置一个具有 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#一目了然

看看如何使用鼠标滚轮将您完美地带到下一个 div？它看起来像是锁定在一个锚上并平滑地滚动到它，不是吗？

各位大侠有什么可以帮忙的吗？

提前非常感谢！

杰夫

4

3 回答 3

1

不知道你最终是否明白了这一点，但我想我会在那里举一个例子......

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

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

// 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 中的注释。

于 2013-12-31T16:37:21.093 回答
1

给你，伙计！在这里查看示例示例

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);
于 2012-11-25T19:43:38.887 回答
0

使用jQuery的鼠标滚轮插件，可以检测滚动方向，设置滚动开始时的变量，返回false；滚动完成后，您可以触发自己的动画以检测到滚动事件的方向滚动窗口。

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

于 2012-11-25T18:17:46.437 回答