ページアップ/ダウンイベントのアニメーションスクロール

Question

ユーザーがページを上下にスクロールすると、各セクションに自動的にスクロールするWebサイトを構築しようとしています。私はこの問題を数週間解決しようとしていて、問題についての助けを感謝しています。イベントハンドラはスクロール機能であるため、複数のスクロールが発生するため、この問題が発生していると思います。私はこのトピックについて議論している多くの記事を読んでおり、解決策はsetIntervalまたはsetTimeout関数を追加しているようですが、私は両方を試しても結果はありません。

var page = $("#page_container"); 
var home = $("#home"); 
var musicians = $("#musicians"); 
var athletes = $("#athletes"); 
var politics = $("#politics"); 
var bio = $("#bio"); 
var pages = [home, musicians, athletes, politics, bio]; 
var scrolled = false; 
var pageCur = 0; 
var lastScrollTop = 0; 

page.scroll(function() { 
    scrolled = true; 
}); 

var scrollTimeout = setInterval(function() { 
    if (scrolled == true) { 
     pageScroll(); 
    } 
    else { 
     clearTimeout(scrollTimeout); 
    } 
}, 3000); 

function pageScroll() { 
    if (scrolled == true) { 
     scrolled = false; 
     var st = page.scrollTop(); 
     var pageNex = pageCur + 1; 

     if (st > lastScrollTop) { 
      alert(pageNex); 
      pages[pageNex].velocity("scroll", {container: $("#page_container")}); 
     } else { 
      alert(pageCur - 1); 
      pages[pageCur - 1].velocity("scroll", {container: $("#page_container")}); 
     } 
     lastScrollTop = st; 
     pageCur = pageNex; 
     alert("1"); 
     clearTimeout(scrollTimeout); 

    } 
} 

Answer 1

確かにタイムアウトを設定してください:) 私はあなたが解決策に近いと思います。

page.on('mousewheel', function (e) { 
      e.preventDefault(); 
      if(Timeout) 
      return //if Timout == TRUE, then stop this function 
      Timeout = true //if Timout == FALSE, set TRUE and then execute 
      pageScroll(e) //scrollfunction to be called, Scrolling all the way!! YEAAH 
      setTimeout(function(){Timeout = false},250)//Set Timeout to False after 0.25s 
     }); 

function pageScroll(e) { 
     var st = page.scrollTop(); 
     var pageNex = pageCur + 1; 
    if (st > lastScrollTop) { 
     alert(pageNex); 
     pages[pageNex].velocity("scroll", {container: $("#page_container")}); 
    } else { 
     alert(pageCur - 1); 
     pages[pageCur - 1].velocity("scroll", {container: $("#page_container")}); 
    } 
    lastScrollTop = st; 
    pageCur = pageNex; 
    alert("1"); 
    e.preventDefault(); 
} 

チェックThis fiddle作業例： この小さなコードをお試しください！作業フィドルを追加しました：

は、それが:)

EDITを助け願っています！

Answer 2

私は速度を使用していることに気付きましたが、私はそのプラグインに慣れていません。これは、使用しない純粋なjquery実装です。setInterval/setTimeout：

var page = $("#page_container"); 
    var home = $("#home"); 
    var musicians = $("#musicians"); 
    var athletes = $("#athletes"); 
    var politics = $("#politics"); 
    var bio = $("#bio"); 
    var pages = [home, musicians, athletes, politics, bio]; 
    var positions = []; 
    $.each(pages, function (k, page) { 
     positions.push(parseInt(page.position().top)); 
    }); 
    //make sure we dont try to scoll while scrolling 
    var scrolling=false; 
    $(page).on("mousewheel DOMMouseScroll", function (event) { 
     event.preventDefault(); 
     if (scrolling===true) { 
      return false; 
     } 
     scrolling=true; 
     var scrollTop = $(window).scrollTop(); 
     var scrollTo = -1; 
     if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
// scroll up, find the HIGHEST position on the page LOWER than our scroll 
      $.each(positions, function (k, position) { 
       if (position < scrollTop) { 
        scrollTo = position; 
       } 
      }); 
     } 
     else { 
      // scroll down, find the LOWEST position HIGHER than our scroll 
//since the list is sorted, stop on the first one 
      $.each(positions, function (k, position) { 
       if (position > scrollTop) { 
        scrollTo = position; 
        return false; 
       } 
      }); 
     } 
     if (scrollTo > -1) { 
      //dont scroll if were already at the top and scrolling up 
      //or at the bottom and scrolling down 
      $('html, body').animate({scrollTop: scrollTo + 'px'}, function(){ 
       //allow scrolling again 
       scrolling=false; 
      }); 
     } else { 
      scrolling=false; 
     } 
    });