{"blocks":[{"type":"paragraph","data":{"text":"Чтобы создать прокручиваемый контейнер, нужно настроить отображение содержимого — его не должно быть видно за пределами блока. Эта задача решается с помощью CSS-свойства overflow. Можно использовать значение auto или scroll. Пример кода:"}},{"type":"codepen","data":{"theme":"dark","height":"480","defaultTab":"css,result","user":"pochemuta","slugHash":"PoGmawK","preview":"true","title":"Basic Slider"}},{"type":"paragraph","data":{"text":"Получился стандартный слайдер, который уже работает. Но он плох тем, что на мобильных устройствах его нельзя листать свайпом. Пользователям приходится перемещать элементы через весь экран. Это происходит из-за того, что прокрутка не учитывает содержимое просматриваемой области."}},{"type":"paragraph","data":{"text":"Решить эту проблему поможет CSS Scroll Snap. Он позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу. Вот классный пример использования из статьи Practical CSS Scroll Snapping:"}},{"type":"image","data":{"file":{"id":140959,"url":"https://media.tproger.ru/uploads/2020/12/snap.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false,"width":1024,"height":686}},{"type":"paragraph","data":{"text":"Чтобы добиться похожего эффекта, добавим в наш код два свойства: scroll-snap-type и scroll-snap-align. Первое нужно указать для контейнера, второе — для дочерних элементов."}},{"type":"codepen","data":{"theme":"dark","height":"480px","defaultTab":"css,result","user":"pochemuta","slugHash":"VwKbdrb","preview":"true","title":"Scroll Snap"}},{"type":"paragraph","data":{"text":"Отлично — теперь элементы можно пролистывать свайпом, а не перетаскивать пальцем через всю ширину экрана. Посмотрим, какие ещё возможности даёт CSS Scroll Snap."}},{"type":"header3","data":{"level":3,"text":"Настройка направления и строгости привязки"}},{"type":"paragraph","data":{"text":"Свойство scroll-snap-type задаётся контейнеру и позволяет указать направление, в котором происходит привязка прокрутки (x или y), а также строгость привязки (none, mandatory или proximity)."}},{"type":"paragraph","data":{"text":"С направлением всё просто:"}},{"type":"list","data":{"items":["горизонтальная прокрутка — x или ключевое слово inline:","вертикальная прокрутка — y или ключевое слово block;","привязка в обоих направлениях — both."],"style":"unordered"}},{"type":"paragraph","data":{"text":"Чуть сложнее увидеть разницу между значениями mandatory и proximity, которые определяют строгость привязки:"}},{"type":"list","data":{"items":["none — нет привязки к точке;","mandatory — обязательное смещение прокрутки к указанной точке;","proximity — смещение происходит только в тех ситуациях, когда область видимости находится близко к точке привязки. Степень близости браузер определяет самостоятельно."],"style":"unordered"}},{"type":"paragraph","data":{"text":"Главный плюс mandatory — предсказуемость. Вы знаете, что браузер точно сместит область видимости к заданной точке. Главный минус — негибкость. Например, если содержимое при вертикальной прокрутке слишком большое по высоте, то пользователи окажутся в неприятной ситуации — они просто не смогут переместиться к определённому месту, браузер будет сразу перекидывать их к точке привязки."}},{"type":"codepen","data":{"theme":"dark","height":"480","defaultTab":"html,result","user":"pochemuta","slugHash":"WNGjyLm","preview":"true","title":"Scroll Snap mandatory"}},{"type":"paragraph","data":{"text":"Текст не помещается в области видимости по высоте, последние строчки невозможно прочитать, потому что срабатывает строгая привязка к прокрутке. Чтобы такого эффекта не было, можно заменить mandatory на proximity. Но и здесь остаётся опасность пролистывания — всё зависит от браузера. Проблему можно решить с помощью свойства scroll-padding, о котором мы поговорим ниже."}},{"type":"header3","data":{"level":3,"text":"Изменение точек привязки"}},{"type":"paragraph","data":{"text":"Свойство scroll-snap-align задаётся дочерним элементам. Это те самые точки привязки, про которые шла речь при изучении значений mandatory и proximity свойства scroll-snap-type. Доступные значения scroll-snap-align — start, center и end."}},{"type":"paragraph","data":{"text":"Чтобы было проще понять разницу, посмотрите на этот пример:"}},{"type":"codepen","data":{"theme":"dark","height":"480","defaultTab":"css,result","user":"pochemuta","slugHash":"BaLRPjb","preview":"true","title":"Scroll Snap start, center, end"}},{"type":"paragraph","data":{"text":"У первого и второго элементов значение start, у третьего — center, — у четвёртого и пятого — end. Прокрутите содержимое контейнера вверх и вниз. Проследите, как меняется позиция каждого элемента."}},{"type":"paragraph","data":{"text":"При горизонтальной прокрутке привязка работает аналогичным образом. Start в таком случае — левый край контейнера, end — правый край."}},{"type":"header3","data":{"level":3,"text":"Управление прокруткой"}},{"type":"paragraph","data":{"text":"Свойство scroll-snap-stop задаётся дочерним элементам и позволяет управлять прокруткой. Принимает два значения:"}},{"type":"list","data":{"items":["normal — привязка происходит только тогда, когда пользователь прекращает прокрутку, отдельные точки привязки могут быть пропущены;","always — контейнер останавливается на каждой точке привязке, прежде чем пользователь сможет скроллить дальше."],"style":"unordered"}},{"type":"paragraph","data":{"text":"Значение по умолчанию — normal. Но если вы хотите исключить вероятность того, что пользователь пролистнёт важный элемент, установите значение always."}},{"type":"header3","data":{"level":3,"text":"Настройка внутреннего отступа контейнера"}},{"type":"paragraph","data":{"text":"Свойство scroll-padding задаётся контейнеру и устанавливает внутренний отступ. Вместо сокращённой записи можно использовать более конкретную: scroll-padding-top/right/bottom/left."}},{"type":"paragraph","data":{"text":"Внутренний отступ может быть полезен, если высота элемента больше высоты контейнера. Это решает рассмотренную выше проблему использования значения mandatory свойства scroll-snap-type. Можно просто указать, чтобы при пролистывании сверху оставалось достаточно место для отображения последних строк фрагмента текста."}},{"type":"codepen","data":{"theme":"dark","height":"480","defaultTab":"html,result","user":"pochemuta","slugHash":"JjRNBVB","preview":"true","title":"Scroll Snap padding"}},{"type":"paragraph","data":{"text":"Ещё одно полезное применение — если внутри контейнера есть фиксированный блок. Отступ поможет избавиться от перекрывания содержимого."}},{"type":"header3","data":{"level":3,"text":"Настройка внешнего отступа элемента"}},{"type":"paragraph","data":{"text":"Свойство scroll-margin задаётся дочерним элементам и устанавливает внешний отступ до позиции прокрутки. Вместо сокращённой записи можно использовать более конкретную: scroll-margin-top/right/bottom/left."}},{"type":"codepen","data":{"theme":"dark","height":"480","defaultTab":"css,result","user":"pochemuta","slugHash":"poEPZme","preview":"true","title":"Scroll Snap margin"}},{"type":"paragraph","data":{"text":"Например, здесь внешний отступ задан только третьему элементу. Он занимает позицию в 50px от позиции прокрутки. При этом следующие за ним элементы снова привязываются к указанной точке."}},{"type":"paragraph","data":{"text":"Поддержка в браузерах:"}},{"type":"image","data":{"file":{"id":140956,"url":"https://media.tproger.ru/uploads/2020/12/support.png"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false,"width":1374,"height":429,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2020/12/support.png","alt":"CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript 2","dimensions":{"width":1374,"height":429},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/TUj-ViDzgBP9UNSLvzkWbC9eLiUs_Sc7kTCXkHV3pwE/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAyMC8xMi9zdXBwb3J0LnBuZw=","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/JWEfnmMBi4BC41xJUNSS6-37SX2p4I-JSww2rTnaprE/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAyMC8xMi9zdXBwb3J0LnBuZw=","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/_g_NH-1vfaYqyLjYlzb0VQc9L1Kfchz5jz7ApDCywaI/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAyMC8xMi9zdXBwb3J0LnBuZw=","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/9MoEA3UjrgC_4BRdEBO-w5eM4IVWPbubNmUcqQFGMJw/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAyMC8xMi9zdXBwb3J0LnBuZw=","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/I5uyA-Wxuytrow6UsYfAjz0W8zbI4t8Dm4MK-vYl_Vw/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAyMC8xMi9zdXBwb3J0LnBuZw=","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/nuoHBv8IvMD6mqu_GzflssiKDq8iddPWyWgnWx5Y43o/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAyMC8xMi9zdXBwb3J0LnBuZw=","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/mm6vk39W1PMy3hlAXaUP6sGRWQmpFLmbxpqzwFQFQM4/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAyMC8xMi9zdXBwb3J0LnBuZw=","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/cX9eazGEjn9UaU1OJ33JRmleCwhhFWBIZFPG-jmeuE4/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAyMC8xMi9zdXBwb3J0LnBuZw=","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"type":"paragraph","data":{"text":"Актуальность проверяйте на сайте Can I Use."}},{"type":"paragraph","data":{"text":"Узнать больше:"}},{"type":"list","data":{"items":["Спецификация CSS Scroll Snap"],"style":"unordered"}},{"type":"paragraph","data":{"text":"Ещё интересные материалы про CSS и фронтенд:"}},{"type":"list","data":{"items":["Современный CSS мощнее, чем вам кажется: 12 примеров, в которых не нужен JavaScript","Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице","Как стать фронтенд-разработчиком в 2021 году: дорожная карта"],"style":"unordered"}}]}

Ошибка в настройках сайта