Wprowadzenie do CSS Scroll Snap Points

The Moduł CSS Scroll Snap to standard internetowy, który daje nam pewną kontrolę przewijanie strony internetowej dzięki czemu możemy sprawić, że użytkownicy będą przewijać pewne części strony, a nie tylko w dowolnym miejscu.

Przewijanie jest jednym z najczęściej wykonywanych działań na stronie internetowej. Przeglądarki na przestrzeni lat poprawiono wydajność przewijania aby dopasować zwinność palców użytkowników. I deweloperzy mają użyto przewijanie twórczo aby osiągnąć lepsze lub nieszablonowe wrażenia użytkownika.

Jednak jeśli chodzi o korelację między kodowanie i przewijanie, tylko JavaScript wydawał się mieć jakąkolwiek kontrolę nad tym ostatnim. Tak było przez długi okres czasu, ale z wprowadzenie punktów przyciągania przewijania, CSS zaczął nadrabiać zaległości.

Przewijanie bez przewijania punktów przyciągania

Zazwyczaj nie przewijamy bardzo wolno, zwłaszcza na telefonach. Im szybciej przewijasz, tym mniej masz kontroli gdzie na ekranie skończysz kiedy przestałeś przewijać.

Wyobraź sobie, że przewijasz tablicę z obrazem produktu na stronie internetowej, w galerii zdjęć lub w slajdach online. W takich aplikacjach wolisz zobacz cały produkt, zdjęcie lub slajd za każdym razem, gdy się przewijasz. Nie tylko część obrazu produktu, zdjęcia lub slajdu.

Na przykład w poniższej wersji demonstracyjnej możesz zobaczyć tylko wtedy, gdy użytkownik przestanie przewijać około połowa obrazu jest widoczna na dole ekranu. Jednak większość użytkowników woli widzieć ostatni obraz w pełni.

Przewijanie z punktami przewijania

To jest miejsce, do którego przynosimy Przewijanie punktów CSS. Nazwa jest oczywista; to standard CSS, który pozwala nam zatrzasnąć przedmioty na miejscu podczas przewijania.

Tam są pięć właściwości CSS które stanowią ten standard:

1. typu snap-snap
2. punkty przewijania-x
3. przewiń-punkty-y
4. współrzędna przewijania
5. przewiń-snap-cel

Obsługa przeglądarki

Właściwości potrzeba -webkit i -ms przedrostki dla odpowiednich przeglądarek. Podczas pisania tego artykułu, przewijanie CSS nie jest obsługiwane w Chrome i Operze.

Zauważ, że cztery ostatnie właściwości zostaną prawdopodobnie usunięte przez aplikacje użytkownika w najbliższej przyszłości. Zamiast, nowe właściwości, mianowicie przewiń-wyrównaj-przyciągnij, przewijanie-margines, i przewijanie-napinanie, może zostać utworzony, jak określono w tej specyfikacji.

Jednak będą mają podobny cel jak poprzednie właściwości. Obecnie poprzedni zestaw właściwości będzie działał dobrze.

Nieruchomości

Musisz Dodaj typu snap-snap właściwość do kontenera przewijania (element kontenera, którego dzieci przepełniają się podczas przewijania). Określa ścisłość akcji snap. Może przyjmować trzy wartości:

1. obowiązkowy - gdy przewijanie się zakończy, przewijanie będzie przyciągnij do odpowiedniego punktu przyciągania
2. bliskość - mniej rygorystyczne niż obowiązkowy; to będzie zależą od osądu UA czy element będzie przyciągany w danym punkcie przyciągania
3. Żaden - nie ma przyciągania

The punkty przewijania-x i przewiń-punkty-y nieruchomości należą do kontenera przewijania, zbyt. Odnoszą się do punktów na osi X i Y, gdzie będą istniały punkty przyciągania. Ich wartość to podane przez powtarzać() funkcjonować. Na przykład, jeśli chcesz dodać punkty przyciągania wzdłuż osi X w przedziale 100px musisz użyć przewijanie-punkty-x: powtórz (100px) reguła.

The przewiń-snap-cel właściwość jest również dodawana do kontenera przewijania. To definiuje współrzędną na kontenerze gdzie leży cel podróży. Znajduje się w tym miejscu przyciągania, gdzie dzieci kontenera zaczepią się na miejscu po przewinięciu.

Możesz użyć współrzędna przewijania nieruchomość w połączeniu z przewiń-snap-cel. Musisz dodać go do elementów potomnych kontenera. To definiuje współrzędne elementów potomnych, który wyrówna się ze współrzędnymi docelowymi ich kontenera przewijania, gdy użytkownik przewinie ekran.

Pamiętaj, że nie musisz używać wszystkich właściwości jednocześnie. Tylko typu snap-snap Jest obowiązkowe. Oprócz tego można zdefiniować pojedyncze punkty przyciągania lub użyć kombinacji miejsce docelowe-współrzędne.

Przykład kodu

Oto przykładowy fragment kodu dla a typowy pojemnik do przewijania, z przewijanie w kierunku pionowym i niektóre obrazy wewnątrz. Wyświetla demo, które można znaleźć na początku tego posta.

 div width: 300px; wysokość: 300px; overflow: auto;… div> img width: 250px; wysokość: 150px;… 

Teraz my dodaj kilka punktów przyciągania do kontenera przewijania:

 div width: 300px; przepełnienie: auto; scroll-snap-points-y: repeat (150px); typ przewijania: obowiązkowy;  

Poniżej możesz zobaczyć, jak wygląda wyjście Dodano punkty przyciągania CSS. Zwróć uwagę, gdy przewijanie zatrzymuje się, a dolny obraz jest tylko częściowo widoczny, pojawia się pełny obraz po przewinięciu przewijania w punkt przyciągania nad nim.