vertikale Slider mit jquery

Question

Was ich bekommen möchte: Wenn scroll down gehen zum nächsten div mit Inhalt Wenn scrollen bis zum vorherigen div mit Inhalt Ich schreibe ein wenig Code, aber er arbeitet mit riesigen Sprungverzögerungen und ... Ich weiß nicht, wo ich Fehler gemacht habe. Wer kann mir helfen ?

var lastScrollTop = 0; 

$('.wrapper').on('scroll', function() { 
    var st = $('.wrapper').scrollTop(); 
    if (st > lastScrollTop){ 

    $(".wrapper").animate({ 
     scrollTop: $("#one").offset().top 
    }, 600); 

    } else { 

    $(".wrapper").animate({ 
     scrollTop: $("#two").offset().top 
    }, 600); 

    } 
    lastScrollTop = st; 
}); 

EDIT: alles muss funktioniert wie diese one. Wenn Scroll .wrapper div nach oben oder unten
-> mit Inhalt zum nächsten/vorherigen div Block geht

Answer 1

Es ist wichtig zu erkennen, dass das scroll Ereignis viel ausgelöst wird beim Scrollen, nicht nur auf Scroll-Ende oder blättern Anfang. Dies bedeutet, dass alles innerhalb von .scroll() auch die gleiche Menge ausgelöst wird. Besonders wenn man dies mit Animationen kombiniert, die jedes Mal passieren müssen, wird dies zu einem Overhead führen.

Am wichtigsten ist, dass Sie eine vorherige Animation beenden möchten, wenn ein neues Bildlaufereignis ausgelöst wird. Verwenden Sie dazu jQuerys .stop() oder finish(), um die Animation zu stoppen.

, die wie folgt aussehen würde:

var lastScrollTop = 0; 

$('.wrapper').on('scroll', function() { 
    var st = $('.wrapper').scrollTop(); 
    if (st > lastScrollTop){ 

    $(".wrapper").finish().animate({ 
     scrollTop: $("#one").offset().top 
    }, 600); 

    } else { 

    $(".wrapper").finish().animate({ 
     scrollTop: $("#two").offset().top 
    }, 600); 

    } 
    lastScrollTop = st; 
}); 

weiter optimieren Sie die Menge das Ereignis ausgelöst wird begrenzen möchten. Dies wird typischerweise von throttling or debouncing durchgeführt.

In Ihrem Beispiel würde es so aussehen, sowie einige zusätzliche Reinigung bis:

var lastScrollTop = 0, 
    wrap = $(".wrapper"); 

wrap.on('scroll', $.throttle(250, sectionMagnet)); 

function sectionMagnet() { 
    var st = wrap.scrollTop(); 
    var el = (st > lastScrollTop) ? $("#one") : $("#two"); 

    wrap.finish().animate({ 
    scrollTop: el.offset().top 
    }, 600); 

    lastScrollTop = st; 
}