CSS Scroll snap point не работает в iOS 9.1 safari

Я только что обновил свой ipad mini до iOS 9.1 и в соответствии с могу ли я использовать Я должен иметь возможность использовать CSS snappoints на моем устройстве в safari. В интернете есть демо-версия snap-point, но я написал свой собственный (почему бы и нет:)демо. В этой демонстрации вы можете прокручивать по горизонтали.

HTML-код:

<ol>
        <li class="a"></il>
        <li class="b"></il>
        ...
</ol>

стили:

ol {
    list-style-type: none;

    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    scroll-snap-type: mandatory;
    scroll-snap-points-x: repeat(100%);
    scroll-behavior: smooth;
}

в любом случае, моя демо работает в FF и Safari на моем ноутбуке, но на моем iPad это не так. Так что вопрос в том, Могу Ли Я Использовать не так или я делаю что-то неправильно ?

9
browser-support css3 safari scroll-snap-points

3 ответов

я смог заставить его работать, добавив в -webkit-overflow-scrolling: touch; см. эту обновленную скрипку http://jsfiddle.net/hpjtqewn/2/

кнопка не работает, но когда я использую палец и прокрутку, она щелкает на правильные точки привязки, то же самое в моем safari на моем рабочем столе, который работает, когда я использую тачпад для прокрутки. Обычная мышь не работает, и нажатие кнопки не работает, но это, вероятно, связано с тем, как вы используете .прокрутка через jquery.

4

У меня была такая же проблема с проектом, который не будет делать то, что вы предлагаете на iPad. Однако из-за крайнего срока я закончил использовать этот супер легкий маленький плагин jquery,называемый:

Snap-point

попробуйте демо здесь:http://robspangler.com/git/jquery-snappoint/demo/demo.html

2

вы можете добавить Родительский div для вашего ol и использования - webkit-переполнение-прокрутка: touch. Это исправления для проблем прокрутки на iOS.

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
    <ol>
      <li class="a"></il>
      <li class="b"></il>
      ...
    </ol>
</div>
2