Плавная прокрутка прокрутки собственного стиля с ускорением/замедлением на IOS с использованием переполнения-x: прокрутка; прокручиваемый div с помощью CSS

Использование прокручиваемого div

.scrollable-div{
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

DEMO на устройствах Android прокрутка на прокрутке гладкая и даже имеет ускорение и замедление.

Тот же код на iPhone, прокрутка жесткая. Когда пользователь отпускает сигнал касания, прокрутка немедленно прекращается.

Как сделать iPhone обработанным прокручиваемым div, как браузер Android, с плавной прокруткой в стиле ускорения/замедления?

Ответ 1

Вы можете прокрутить прописную строку в стиле HTML с помощью overflow с помощью следующего проприетарного свойства CSS:

-webkit-overflow-scrolling: touch;

У него есть некоторые предостережения. В зависимости от того, что внутри элемента, рендеринг может быть слегка сломан, поэтому вы должны проверить его и посмотреть, подходит ли он вашим конкретным потребностям. Я также не уверен, правильно ли он работает, когда вы указываете overflow-y: hidden. Если это не так, вы можете заставить его работать, играя с разными значениями для overflow-x, overflow-y и overflow (auto, похоже, не работает).

Если вам нужно, вы можете подделать overflow-y: hidden на свой div, создав второй вложенный div с контентом и установив на него это свойство. Но я надеюсь, что это не обязательно.

Ответ 2

Предложение от Marco Aurélio на самом деле является лучшим решением. Он лучше всего работает, если вы установите overflow-y: scroll и добавив -webkit-overflow-scrolling: touch к элементу. Вы получите ощущение родного прокрутки

Ответ 3

Хорошо, это то, что работает для меня:

body, html { 
   overflow-x:hidden; 
   -webkit-overflow-scrolling: touch;
}