Структура модального окна

Как сделать плавный спролл на iOS с помощью CSS

· CSS и Снипеты · 1 мин чтения

Я не смогу вам показать демо, которые покажет суть проблемы, но постараюсь максимально описать её, а так же показать решение. 

Суть проблемы

Во время разработки сайта вы можете столкнуться с проблемой разработки модального окошка для мобильной версии или для планшета на iOS.

На моем личном опыте: я верстал модальное окно для одного лендинга.

Как правило у него две основные части: (1) overlay — это слой, который перекрывает все остальные элементы страницы (обычно он полупрозрачный) и (2) само модальное окно, которое идет поверх overlay.

Так же: Если кому интересно, я как-то выкладывал пост про модальное окошко выполненное в стиле Material Design.

Для (1), я прописываю position: fixed (чтобы overlay был всегда фиксировано во всю ширину и высоту экрана пользователя и двигался за ним при скролле), ширину и высоту равную 100 прцоентам и возможность скроллить по y-оси.

Для (2), я использую position: absolute и сверху (top: 50%) и слева (left: 50%) делаю по 50% и потом с помощью минусного margin-left: -{w}px и margin-top: -{h}px выравниваю окно по центру.  {w} — это ширина и {h} окна деленная на половину.

Для визуального представления можно посмотреть картинку ниже:

Структура модального окна

Решение

Решение проблемы как оказалось достаточно простое — это использовать  overflow свойство, но конкретно для webkit браузеров.

В моем случае скролл делался в overlay окне, тем самым мне нужно дописать следующие свойства для этого блока:

overflow-y: scroll; 
-webkit-overflow-scrolling: touch;

overflow-y все понятно. Для нас важнее свойство -webkit-overflow-scrolling. Apple описывает его следующим образом:

Specifies whether to use native-style scrolling in an overflow:scroll element.

Дословный перевод: «хотите вы использовать встроенный скролл устройства (например iPhone 7) или стандартный overflow: scroll«.

Принимаются два значения:

auto — скролл с помощью одного пальца, без моментума

touch — стандартный скролл девайса

Источники и дальнейшее чтение

Комментарии