Smooth scroll Vanilla JS vs. JQuery

pytanie zadane 23 maja 2018 w JavaScript przez Łucja Nowicjusz (120 p.)

Cześć,

mam pytanie początkującego. Ostatnio czytałam, że teraz odchodzi się od jQuery. Koduję właśnie w ramach ćwiczeń stronę i nie chciałam używać jQuery tylko vanilla JS. Kiedy jednak chciałam zrobić nawigację ze smooth scrollem do każdej z sekcji, znalazłam w internecie bardzo długi i skomplikowany według mnie kod (w czystym JS). W jQuery wystarczy wykleić coś takiego:

  $('body,html').animate({
            scrollTop: $(this.hash).offset().top
   }, 1000 );

i gra. I tutaj moje pytanie. Bo skoro istnieje zasada KISS, to czy pisanie długiego kodu JavaScripcie zamiast załączenie jQuery i uproszczenie rozwiązania ma sens?

Z góry dziękuję za odpowiedź ;)

1 odpowiedź

odpowiedź 23 maja 2018 przez kubaapk Nałogowiec (44,270 p.)

To zależy. Jeśli masz ładować całą bibliotekę tylko po to, żeby zrobić smooth scroll to nie jest to dobry pomysł.

komentarz 24 maja 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Dodam tylko, że jest to dość trudne do zrobienia w JS. Po drugie sama wtyczka jest praktycznie nie modyfikalna. Ap rzy skompilikowanych layoutach (wyjedząnie okien jakiś overlayout) to dostawała za przeproszeniem 'pierdolca' na mobile.

komentarz 25 maja 2018 przez zgrybus Pasjonat (24,860 p.)

Eee.. nie jest trudne do zrobienia. Pobierasz wysokość elementu do którego chcesz zjechać i lecisz funkcją requestAnimationFrame do Niego - 60 fps dodatkowo czyni to ładnym przejściem

komentarz 26 maja 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Skomplikujmy sprawę, podam przykład z projektu mam 15 elementów w menu (bardzo stary system), gdy dany sekcja jest widoczna ma się coś stać na danym elemencie z menu. Przy tym to ma działać również z odświeżeniem strony. Na jakiej podstawie to policzysz który element w menu ma się zmienić?

Mamy menu mobilne wyżej wspomnianego elementów ,jest ono na fixed i zajmuje określoną wysokość, która nigdzie nie jest dodana. Jakim sposobem naprawisz by to poprawnie działało?

komentarz 26 maja 2018 przez zgrybus Pasjonat (24,860 p.)

mam 15 elementów w menu (bardzo stary system), gdy dany sekcja jest widoczna ma się coś stać na danym elemencie z menu. Przy tym to ma działać również z odświeżeniem strony. Na jakiej podstawie to policzysz który element w menu ma się zmienić?

Nie bardzo rozumiem o co chodzi, ale strzelam, że jeśli jestem w danej sekcji to jakiś element menu ma się np. podświetlić? Co za problem? Dodajesz do sekcji data-menu="unikalny_odnośnik_menu" i działasz z tym menu - np. zmieniasz kolor.

Mamy menu mobilne wyżej wspomnianego elementów ,jest ono na fixed i zajmuje określoną wysokość, która nigdzie nie jest dodana. Jakim sposobem naprawisz by to poprawnie działało?

yyy... ale co ma poprawnie działać? Przecież wysokość nie pobiera się tylko za pomocą height a również outHeight / clientHeight etc.

Nie rozumiem tych problemów albo nie znasz możliwości javascriptu :)

komentarz 26 maja 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Nie bardzo rozumiem o co chodzi, ale strzelam, że jeśli jestem w danej sekcji to jakiś element menu ma się np. podświetlić? Co za problem? Dodajesz do sekcji data-menu="unikalny_odnośnik_menu" i działasz z tym menu - np. zmieniasz kolor.

Case jest taki, użytkownik odświeża stronę, kotwica nie leci na górę. Na jakiej podstawie policzysz która ma sekcja się świecić? Dodać klasę CSS. By utrudnić zadanie 2 sekcje się mieszczą w jednym oknie przeglądarki.

yyy... ale co ma poprawnie działać? Przecież wysokość nie pobiera się tylko za pomocą height a również outHeight / clientHeight etc.

Podpowiem, Jeżeli element ma wartość fixed i zajmuje 50 vh czy wysokość dokumentu się zmieni, czy wysokośc danego elementu się zmieni? Co się dzieje jak dany element dostaje fixed?

Nie rozumiem tych problemów albo nie znasz możliwości javascriptu :)

Widocznie lata poszły na marne.

komentarz 26 maja 2018 przez zgrybus Pasjonat (24,860 p.)

Case jest taki, użytkownik odświeża stronę, kotwica nie leci na górę. Na jakiej podstawie policzysz która ma sekcja się świecić?

Dodajesz do localStorage dodajesz przy reload, która sekcja się świeciła :)

Podpowiem, Jeżeli element ma wartość fixed i zajmuje 50 vh czy wysokość dokumentu się zmieni, czy wysokośc danego elementu się zmieni? Co się dzieje jak dany element dostaje fixed?''

Ale co to ma do pobrania wysokośći? Przecież nadal ma określoną wysokość i możesz ją pobrać z poziomu metod HTMLElement.

Widocznie lata poszły na marne.

komentarz 26 maja 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Dodajesz do localStorage dodajesz przy reload, która sekcja się świeciła :)

A na jakiej podstawie stwierdzisz która?

Ale co to ma do pobrania wysokośći? Przecież nadal ma określoną wysokość i możesz ją pobrać z poziomu metod HTMLElement.

Dużo, pomyśl. Masz menu które jest na fixed i co się dzieje elementem pod spodem, gdy wywołowam klik na jakiś elementcie biorąc pod uwagę, że używamy tej biblioteki. I nie mów mi proszę, co czym super sobie to wyciągnę, tylko staraj się odpowiedzieć na pytanie, jaki masz pomysł rozwiązania.

komentarz 26 maja 2018 przez zgrybus Pasjonat (24,860 p.)

A na jakiej podstawie stwierdzisz która?

Ilu programistów tyle pomysłów. Napisałem wcześniej, że użyłbym indentyfikatora data-menu.

Dużo, pomyśl. Masz menu które jest na fixed i co się dzieje elementem pod spodem, gdy wywołowam klik na jakiś elementcie biorąc pod uwagę, że używamy tej biblioteki. I nie mów mi proszę, co czym super sobie to wyciągnę, tylko staraj się odpowiedzieć na pytanie, jaki masz pomysł rozwiązania.

Tyle, że problemu nie mogę zrozumieć.

Ogólnie problem jest taki, że twoje pytania są raczej w stylu - Jak to zrobić w języku programowania? Jaki masz pomysł.
A nie w stylu - w jQuery mam metodę slideToggle / scrollTo - w JS muszę pisać od zera.

Temat był dobry, ale zbaczamy teraz na całkiem inny tor. Nie ma sensu raczej ciągnąć tego tematu, skoro wolisz używać jQuery - rób to. Jeśli chcesz się podszkolić w JS i w niedługim czasie znaleźć pracę - pisz w czystym Javascripcie. Nie dość, że nauczysz się kilku fajnych metod to może zrozumiesz dokładniej jak działa ten język i dodatkowo nauczysz się pisać coraz to lepszy kod :)

PS. Takie rzeczy naprawdę uczą - pierwszą rzecz, która napisałem był prosty slider ( sprawił mi kilka problemów ). Dziś napisałbym taką rzecz w sekundę.

komentarz 26 maja 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Ilu programistów tyle pomysłów. Napisałem wcześniej, że użyłbym indentyfikatora data-menu.

Unikasz odpowiedzi. A ja na to czekam, by podrzucić kolejne kłody i uwierz mi nie jest to banalne.

Tyle, że problemu nie mogę zrozumieć.

1. Odpalam na mobile.

2. Mam menu otwarte na fixed.

3.Klikam jakiegoś anchora.

4.Element nie zatrzyma się w odpowienim miejscu. Dlaczego? Element fixed nie powoduje to, że doda się wysokość tego elementu document.height, przez to sam anchor nie poprawi swojej pozycji.

5. Owszem, możemy zwinąć menu, ale musimy poczekać aż się zwinie, następnie dopiero wykonać smooth-scroll , ale od strony UX-owej jest to słabe + dodatkowa logika komponentu.

A nie w stylu - w jQuery mam metodę slideToggle / scrollTo - w JS muszę pisać od zera.

Przedstawiam Ci problemy jakie napotkałem po drodze, gdy używałem owej biblioteki i próbowałem wstawić coś swojego, a wstawianie w czasie animacji innego elementu(przy danym n frames) jQ to szkoda gadać.