Scrollen zum nächsten Anker nach dem Scrollen

Question

Ich schreibe eine Website und ich möchte einige Fenster-divs/Abschnitte zu bauen. Wenn der Benutzer nicht mehr zwischen zwei dieser divs scrollt, sollte das div, das in diesem Moment mehr Platz benötigt, unter gescrollt werden, damit es volle Fenstergröße hat.

Answer 1

Ich habe keine vorherige Erfahrung mit dieser Art von Plugins von Drittanbietern, so kann ich nicht die "beste" empfehlen.

Aber hier sind einige Beispiele:

http://guidobouman.github.io/jquery-panelsnap/

http://wtm.github.io/jquery.snapscroll/

Ich glaube, das ist das, was Sie suchen.

Edit: Dieser sieht nett auch https://projects.lukehaas.me/scrollify/#options

Answer 2

Es gibt jQuery-Plugins, dies zu tun, aber hier ist eine gute Vorlage, um zu sehen, wie Sie Ihre eigenen implementieren können:

https://startbootstrap.com/template-overviews/scrolling-nav/

Hier ist die relevanten Scrollen JavaScript für Beschleunigungsfunktion ist es schön und scrollbaren zu machen:

//jQuery to collapse the navbar on scroll 
$(window).scroll(function() { 
    if ($(".navbar").offset().top > 50) { 
     $(".navbar-fixed-top").addClass("top-nav-collapse"); 
    } else { 
     $(".navbar-fixed-top").removeClass("top-nav-collapse"); 
    } 
}); 

//jQuery for page scrolling feature - requires jQuery Easing plugin 
$(function() { 
    $('a.page-scroll').bind('click', function(event) { 
     var $anchor = $(this); 
     $('html, body').stop().animate({ 
      scrollTop: $($anchor.attr('href')).offset().top 
     }, 1500, 'easeInOutExpo'); 
     event.preventDefault(); 
    }); 
}); 

Answer 3

FullPage.js macht genau das, was Sie brauchen.

Wenn die gesamte Bibliothek zu schwer ist für das, was Sie brauchen, könnten Sie versuchen, die Logik mit so etwas wie dieses https://github.com/alvarotrigo/fullPage.js/blob/master/pure%20javascript%20(Alpha)/javascript.fullPage.js#L897-L913