• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Smooth scroll Vanilla JS vs. JQuery

VPS Starter Arubacloud
0 głosów
624 wizyt
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ź

0 głosów
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. 

xD

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ć.

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.

Podaj przykład, gdzie tak mówię, podaje argumenty za i przeciw temu czemuś.

 

 

Podobne pytania

0 głosów
3 odpowiedzi 3,822 wizyt
pytanie zadane 25 listopada 2017 w JavaScript przez sapero Gaduła (4,100 p.)
0 głosów
3 odpowiedzi 337 wizyt
pytanie zadane 25 września 2022 w JavaScript przez Pawel82 Użytkownik (740 p.)
0 głosów
2 odpowiedzi 479 wizyt
pytanie zadane 8 grudnia 2018 w JavaScript przez povalor Nowicjusz (190 p.)

92,782 zapytań

141,712 odpowiedzi

320,596 komentarzy

62,114 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...