Вступ до CSS Scroll Snap Points

The Модуль CSS Scroll Snap це веб-стандарт, який дає нам певний контроль прокручування веб-сторінки так що ми можемо змусити користувачів прокручувати певні частини сторінки, а не просто де-небудь на ній.

Прокрутка є одним з найбільш виконаних дій на веб-сайті. Браузери, протягом багатьох років, мають покращили продуктивність їх прокручування відповідно до гнучкої сили пальців користувачів. А розробники мають використовується творчо для досягнення кращого або нестандартного досвіду користувачів.

Однак, коли мова йде про співвідношення між кодування та прокручування, тільки JavaScript, здавалося, мав будь-яку кількість контролю над останнім. Це було так протягом тривалого періоду часу, але з введення точок прив'язки прокрутки, CSS почав наздоганяти.

Прокручування без пунктів оснащення прокруткою

Як правило, ми не прокручуємо дуже повільно, особливо на телефонах. Чим швидше ви прокручуєтеся, тим менше контролюєте де на екрані ви опинитеся коли ви зупинили прокрутку.

Уявіть, що ви прокручуєте масив зображення продукту на веб-сайті, або галерею фотографій, або слайди в Інтернеті. Те, що ви віддаєте перевагу в таких програмах, це перегляньте весь продукт, фотографію або слайд кожен раз, коли ви прокручуєте. Не тільки частина зображення, фотографії або слайда продукту.

Наприклад, на демонстрації нижче ви можете бачити, коли користувач перестає прокручуватись, тільки близько половини зображення видно у нижній частині екрана. Однак більшість користувачів вважають за краще бачити останнє зображення повністю.

Прокрутка з пунктами оснащення прокручування

Тут ми вносимо CSS прокручує точки прив'язки. Назва не потребує пояснень; це стандарт CSS, що дозволяє нам оснащення елементів на місце під час прокрутки.

Існує п'ять властивостей CSS які становлять цей стандарт:

1. scroll-snap-type
2. scroll-snap-points-x
3. scroll-snap-points-y
4. координати прокручування
5. scroll-snap-destination

Підтримка браузера

Властивості необхідності -webkit і -мс префіксів для відповідних браузерів. Що стосується написання цієї статті, оснащення CSS scroll не підтримується в Chrome і Opera.

Зверніть увагу, що останні чотири властивості, ймовірно, будуть скинуті агентами користувачів у найближчому майбутньому. Замість цього, нові властивості, а саме scroll-snap-align, scroll-snap-margin, і прокручування оснащення, може бути створено, як визначено в цій специфікації.

Однак вони будуть мають подібне призначення як колишні властивості. В даний час колишній набір властивостей буде працювати дуже добре.

Властивості

Тобі потрібно додайте scroll-snap-type властивості до контейнера прокручування (елемент контейнера, чиї діти переповнюються, коли він прокручується). Вона вказує суворість прив'язки. Він може мати три значення:

1. обов'язковий - коли прокрутка завершена, буде прокручування прив'язка до відповідної точки прив'язки
2. близькість - менш суворі, ніж обов'язковий; це буде залежить від судження UA чи елемент буде прив'язуватися до заданої точки прив'язки
3. ні - немає прив'язки

The scroll-snap-points-x і scroll-snap-points-y властивості належать до контейнера прокручування, теж. Вони посилаються на точки на осі x та y, де будуть існувати точки прив'язки. Їх значення є дається повторити () функції. Наприклад, якщо потрібно додати точки прив'язки вздовж осі x на інтервалі 100px потрібно використовувати scroll-snap-points-x: repeat (100px) правило.

The scroll-snap-destination Властивість також додається до контейнера прокручування. Це визначає координати на контейнері де лежить несвоєчасне призначення. Саме в цьому пункті призначення, де діти контейнера будуть вставлятися на місце під час прокрутки.

Ви можете використовувати координати прокручування майно у поєднанні з scroll-snap-destination. Потрібно додати його до дочірніх елементів контейнера. Це визначає координати дочірніх елементів, що буде узгоджуватися з координатами призначення їх контейнера прокручування, коли користувач прокручує екран.

Зауважте, що не потрібно використовувати всі властивості одночасно. Тільки scroll-snap-type є обов'язковим. Разом з цим ви можете або визначити окремі точки прив'язки, або скористатися комбінацією координат призначення.

Приклад коду

Нижче наведено приклад фрагмента коду для a типовий контейнер прокручування, с прокручування у вертикальному напрямку та деякі зображення всередині. Він виводить демо ви можете знайти на початку цього повідомлення.

 div ширина: 300px; висота: 300px; overflow: auto;… div> img ширина: 250px; висота: 150px;… 

Тепер ми додайте деякі точки прив'язки до контейнера прокручування:

 div ширина: 300px; переповнення: авто; scroll-snap-points-y: повтор (150px); scroll-snap-type: обов'язковий;  

Нижче ви можете побачити, як виглядає вивід Додано точки прив'язки CSS. Зверніть увагу на те, коли прокручування зупиняється, а нижнє зображення лише частково видиме, - з'являється повне зображення після того, як scrollport зафіксується в точці прив'язки над нею.