使用javascript/jquery自動滾動到固定點

Question

我在開發中有一個應用程序，我希望它能夠在用戶向上或向下滾動時將其鎖定到最近的錨點。

是否有任何已知的方法來做到這一點？如果有人在iPhone上使用「大約」應用程序，您就會知道我在說什麼。

我有一個簡單的解決方案砍死工作，檢測卷軸和做到這一點：

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

然而，因爲它是相當神經質和不可預測的，有時它的效果並不理想。

一個問題似乎是滾動事件在滾動時觸發開始，滾動結束時是否存在等效事件？

這裏是我想要得到它的工作在現場：

http://supi.hmp.is.it

注效果只在小屏幕觸發（它是不是真的需要在桌面上）。我在滾動中使用了jQuery去抖動，因此只有當用戶停止滾動時纔會觸發。它在桌面上非常流暢，但是當在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。