使用javascript / jquery自动滚动到固定点

Question

我有一个正在开发的应用程序，我想要它，以便当用户向上或向下滚动时，它会将其锁定到最近的锚点。

有没有任何已知的方法这样做？ 如果有人在iPhone上拥有'circa'应用程序，你就会知道我在说什么。

我有一个简单的黑客解决方案工作，检测滚动并执行此操作：

var nearestAnchorOffset = calculateNearestAnchorOffset();
$('body').scrollTop(nearestAnchorOffset);

然而，它并不理想，因为它有时会非常跳跃和不可预测。

一个问题似乎是滚动事件在滚动开始时触发，是否存在在滚动结束时触发的等效事件？

这是我试图让它工作的网站：

http://supi.hmp.is.it

请注意，效果仅在小屏幕上触发（桌面上并不真正需要）。 我在滚动中使用了jQuery debounce，因此它只在用户停止滚动时触发。 它在台式机上非常流畅，但是当在iPhone上查看时，它在50％的时间内无法正常运行并滚动到错误的位置。

这是我到目前为止的完整解决方案：

if($( document ).width() <= 768){
    var offsets = {};
    $( window ).scroll($.debounce(function(data) {
        if(isActive !== false){          
            // different scrollable points
            offsets.todaytitle      = $('.row.today.title').offset();
            offsets.todaywind       = $('.row.today.result .wind').offset();
            offsets.todaytemp       = $('.row.today.result .temp').offset();
            offsets.tomorrowtitle   = $('.row.tomorrow.title').offset();
            offsets.tomorrowwind    = $('.row.tomorrow.result .wind').offset();
            offsets.tomorrowtemp    = $('.row.tomorrow.result .temp').offset();
            offsets.form            = $('#postcodeForm').offset();
            offsets.nav             = $('#nav-bottom').offset();
            offsets.top             = {top: 0};

            var current = $(window).scrollTop();
            var closest = "";
            var curDiff = 99999;
            $.each(offsets, function( key, value ) {
                var diff = Math.abs(offsets[key].top - current);
                if(diff < curDiff){
                    curDiff = diff;
                    closest = key;
                }
            });

            animatedScroll(offsets[closest].top);
        }
    },350));
}

function animatedScroll(offset){
    $("body").animate({ scrollTop: offset },200, function() {
        scrollingOn = false;
    });
}

任何帮助，将不胜感激！

Answer 1

你没有包括你已经尝试过的东西，但是我可以向你展示我最近刚刚提出的这类问题的解决方案。

单独使用scroll()函数不会顺利处理它，因为拖动滚动条可能是个大问题，我建议你用鼠标滚轮事件来做。

通过将其与'DOMMouseScroll mousewheel'事件绑定来进行锚定。 然后使用originalEvent.wheelDelta获取鼠标滚轮的方向，向下滚动将返回负值，向上滚动将为正值。

$('body').bind('DOMMouseScroll mousewheel', function(e){
    var $anchored = $('section.anchored');      

    if(e.originalEvent.wheelDelta < 0) { //mousewheel down
        $next = $anchored.next();

        if($next.length){
            $('body').stop().animate({scrollTop:$next.offset().top},'slow');
            $anchored.removeClass('anchored')
            $next.addClass('anchored')     
        } 
    }else{ //mousewheel up
        $prev = $anchored.prev();

        if($prev.length){
            $('body').stop().animate({scrollTop:$prev.offset().top},'slow'); 
            $anchored.removeClass('anchored')
            $prev.addClass('anchored')   
        }
    }
    e.preventDefault();
});

现在，如果用户通过拖动滚动条滚动，您还需要将'anchored'类指示符移动到视口中最可见的<section> 。

$(window).scroll(function(){
    var st = $(this).scrollTop();

    $('section').each(function(){
        var offset = $(this).offset();
        if(st >= offset.top && st < offset.top + $(this).outerHeight()){
            $(this).addClass('anchored');
        }else{
            $(this).removeClass('anchored');
        }
    });
});

这是我的示例jsfiddle 。