鼠标滚动到锚点

第一个问题在这里，希望你们可以帮忙！我更像一个艺术家，而不是一个编码员，所以我完全迷失在这里。鼠标滚动到锚点

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

我正在设置一个页面，其中一个div的高度为500％。它包含5个高20％的div，给我5个div，这些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？它看起来就像锁定在一个锚上并顺利滚动到它，不是吗？

你们可以帮忙吗？

非常感谢！

杰夫

来源

2012-11-25 Jeff Monk

想要发布html吗？创建一个小提琴？ http://www.jsfiddle.net – VIDesignz

我有一个小提琴安装在这里：[链接}（http://jsfiddle.net/NwUvV/3/），但没有任何脚本，因为我不知道如何开始这个。 Google一直没用。 –

我已经为你做了一个脚本杰夫。让我知道你的想法！ – VIDesignz

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

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

来源

2012-11-25 18:17:46 MyStream

我发现的有关检测滚动方向的所有信息都涉及实际滚动的页面，因此您无法防止默认（不返回false），这意味着需要解决某些冲突才能生成平滑效果。 – Popnoodles

嗨，我的意思是滚轮事件，而不是实际的滚动方向。这里有一个停止检测的例子：http://stackoverflow.com/questions/3515446/jquery-mousewheel-detecting-when-the-wheel-stops – MyStream

但你需要知道它被推向哪个方向。它似乎只能通过比较$（window）.scrollTop（）和它以前的内容来实现。 – Popnoodles

在这里，你去的人！看看这里的例子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);

来源

2012-11-25 19:43:38 VIDesignz

不知道你最终得到这个想通了或没有，但我想我会抛出一个例子在那里......

最终，我们需要拦截的滚动事件并确定用户滚动的方式。一旦我们知道了哪个方向，我们就可以使用一个存储的活动索引变量，并根据活动元素的偏移量对该主体进行动画处理。

// 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-31 16:37:21

鼠标滚动到锚点

回答

相关问题