JavaScript Dodaj Usuń klasę przy przewijaniu

| | | | | | | | | | | | | | | | | |

Paski przewijania i wrażenia użytkownika

Użytkownicy są teraz przyzwyczajeni do pewnych wrażeń podczas przeglądania stron internetowych. Na przykład można oczekiwać, że logo firmy w lewym górnym rogu witryny przeniesie Cię na stronę główną. Ale co, jeśli to nie zadziała? Co by było, gdyby wszystko w tej witrynie było przeciwnie od tego, co myślisz?

Wyobraź sobie, że jest pasek przewijania, ale kiedy poruszasz przyciskiem przewijania na myszy lub slajdzie przesuń palcem po touchpadzie urządzenia, nic się nie dzieje. Byłoby to uważane za okropne wrażenia użytkownika.

Co — co sprawia, że dobre wrażenia użytkownika lub je psuje, może być samodzielną pracą, ale częścią tego — to działa zdecydowanie pojemność i paski przewijają się, aby ukryć ze względów estetycznych.

Paski przewijania są świetnymi wskaźnikami tego, czego możemy się spodziewać na stronie internetowej. Jeśli widzimy pasek przewijania, spodziewalibyśmy się, że konieczne będzie przewinięcie w dół, aby wyświetlić zawartość. Kiedy nie widzisz paska przewijania, jest to zazwyczaj z jednego z dwóch powodów:

  1. Otrzymujesz to, co widzisz – wysokość i szerokość widocznego obszaru (ekranu) odpowiadają wysokość i szerokość witryny.
  2. Projekt witryny zawiera rodzaj strzałki lub funkcję animacji, która pokazuje, że więcej treści jest dostępnych dzięki przewijaniu. Dopiero po rozpoczęciu przewijania pojawia się pasek przewijania. Domyślnym ustawieniem jest pozostanie w ukryciu do tego czasu.
  3. Jako programista, zaimplementowanie prawidłowego użycia paska przewijania poprawi wrażenia użytkownika witryny, co pozwoli utrzymać klientów na stronie.

Uwaga: pamiętaj, aby używać poziomych pasków przewijania, gdy celowo chcesz ich użyć. Jeśli pojawiają się przypadkowo w Twojej witrynie, zwykle dzieje się tak dlatego, że coś jest nie tak z rozmiarem komponentu . Nie ukrywaj poziomych pasków przewijania w celu, kiedy nie powinny być obecne.

Implementacja CSS

Pierwszą rzeczą, na którą należy zwrócić uwagę w tej implementacji, jest to, że wszystkie główne przeglądarki są tworzone tak samo. To, co działa w Firefoksie, nie będzie działać w Chrome lub Internet Explorer i vice versa. CSS używa tak zwanych prefiksów dostawcy lub prefiksów przeglądarek , aby pomóc nam zapewnić obsługę wielu przeglądarek. Przedstawiamy je poniżej:

< br>

Prefiks dostawcy Cheat Sheet

prefiks dostawcy Pokrycie przeglądarki
-webkit- Chrome , Safari, nowsze wersje Opery i większość przeglądarek iOS, w tym Firefox dla iOS
-moz - Firefox (bez iOS)
-o- Starsze wersje Opery
-ms- Internet Explorer i MS Edge

URL: kredyt: MDN - Prefiksy CSS

Tekst alternatywny: Sieć programistów Mozilla stworzyła przydatną ściągawkę, aby zapamiętać, który prefiks należy użyj

Podpis: MDN stworzył przydatną ściągawkę, aby zapamiętać, jakiego prefiksu użyć w przeglądarce

Następnie pojawia się pytanie, w jaki sposób czy wiemy, kiedy potrzebujemy przedrostków, a kiedy nie? Twórcy CSS zawsze eksperymentują z nowymi właściwościami i nowymi sposobami robienia rzeczy - jeśli jest jedna wystarczająca nowa właściwość, prawdopodobnie nie jest jeszcze kompatybilna ze wszystkimi przeglądarkami.

Na szczęście istnieją narzędzia, które przyglądają się Twojemu CSS i dodaj potrzebne przedrostki. Możesz też zrobić to ręcznie i skorzystać z witryny takiej jak caneuse lub dokumenty dla Ciebie MDN w celu określenia zgodności przeglądarki.

Let code

Gdy uruchamiamy ten kod w Chrome, powinien on wygenerować szary element div w tle i trochę tekstu, który możesz przewiń. Uwzględniono dwie najpopularniejsze implementacje — Firefox znajduje się na początku kodu w