Animasyonlu Sayfada Kaydırma Yukarı/Aşağı Olay

Question

Kullanıcı sayfayı yukarı veya aşağı kaydırdığında her bölüme otomatik olarak ilerleyen bir web sitesi oluşturmaya çalışıyorum. Bu sorunu haftalarca çözmeye çalışıyorum ve konuyla ilgili her türlü yardımı takdir ediyorum. Olay işleyicisinin, kaydırma işlevini tetikleyen bir kaydırma olayı olduğundan, bu işlemin birden fazla kaydırmanın gerçekleşmesine neden olacağına inanıyorum. Bu konuyu tartışan pek çok makale okudum ve çözüm setInterval veya setTimeout işlevini ekliyor gibi görünüyor, ama ben hem denedim hem de hala sonuç yok.

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

Nitekim bir zaman aşımı :) Sana çözüme yakın olduğunu düşünüyorum ayarlayın. Bu küçük kod deneyin :

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(); 
} 

kontrol This fiddle çalışan örneğin! bir çalışma keman eklendi:

o :)

EDIT'e yardımcı Umut!

Answer 2

Hız kullandığınızı farkettim, ancak bu eklentiye aşina değilim. Bu, 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; 
     } 
    }); 

kullanılmayan saf bir jQuery uygulamasıdır.