Automatyczny scroll do środka sekcji (100vh)

Question

Cześć,

Mam ciekawy pomysł na stronę internetową, ale potrzebuję Waszej pomocy jeśli chodzi o okodowanie tego. Tutaj screen, żeby zobrazować o co mi chodzi: LINK

Szary prostokąt to jakaś sekcja z ustawioną wysokością 100vh. Czerwona ramka to to co widzi w danym momencie użytkownik. No i właśnie chodzi mi o coś takiego, że gdy monitor wyświetla ponad 50% tej sekcji o wysokości 100vh to wtedy automatycznie strona płynnie (z animacją) scrolluje do takiego momentu by na stronie była widoczna TYLKO ta sekcja, czyli tak, żeby sekcja 100vh była wycentrowana w pionie.

Nie mam nawet pomysłu jak tego szukać w Google, ani nie bardzo pamiętam czy takie rozwiązanie już widziałem kiedykolwiek na jakiejś stronie, dlatego pytanie jak to zrobić kieruję do Was. Mam nadzieję, że mi pomożecie lub chociaż w jakiś sposób naprowadzicie :)

Pozdrawiam.

Answer 1

Rozwiązanie jakie przychodzi mi na myśl to podpięcie zdarzenia pod okno, nasłuchiwanie na scrollu i sprawdzanie offsetu od góry okna. Jak offset zbliży się do 50%, wtedy wywoła się funkcja, która "doscrolluje" do początku sekcji.

Nie wiem czy takie rozwiązanie byłoby optymalne, ale zawsze to jakaś opcja.