javascript - 如何将 'lock' 滚动到 div？

Question

我已经建立了一个滚动网站(本质上是一个视差样式的页面，没有视差效果)，其中每个“页面”只是一个占据 100% 屏幕的 div。但我需要某种机制来将滚动“锁定”到正确的位置，以便 div 将与用户的浏览器正确对齐。

如果您需要一个示例，Flickr 的醒目页面可以完美地做到这一点。

谢谢。

编辑:这是我正在处理的网站的链接。代码有点乱，有些图片没有加载(因为它们还没有托管)，但它可以让您大致了解网站的运作方式。 http://fiddle.jshell.net/99QjJ/

Answer 1

我只是试图构建一个快速解决方案:Fiddle

它阻止了正常的滚动并只滚动到 div 的适当偏移量:

if(!scrolling) {
    scrolling = true;
    currentDiv = (scrollDirection == "down" ? currentDiv + 1 : currentDiv - 1)
    $("html,body").animate({
        "scrollTop":offsets[currentDiv]
    },{queue:true,duration:1000,complete:function() {
        window.setTimeout(function() {
             scrolling = false;
         },200);
    }});

这不是完整的解决方案，但我认为这会奏效。 另一个想法是使用数以千计的 jQuery 插件之一，通过箭头键使页面可滚动。我认为，如果每个 div 都适合整个屏幕尺寸，则实际上没有必要在“中间”滚动。