Подтвердить что ты не робот

Css scroll-snap bug iOS 10

Я заметил странную ошибку в iOS 10 с свойствами css scroll-snap.

Вот мой css:

#springBoard{
    height: 100%;
    width: 100%;
    font-size: 0px;
    white-space: nowrap;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-scroll-snap-type: mandatory;
    -webkit-scroll-snap-points-x: repeat(100%);
}

section{
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: top;
    font-size: 16px;
}

Если я программно прокручиваю до точки привязки, а затем меняю содержимое внутри контейнера прокрутки, навигатор возвращается к первой привязке.

// Programatically scroll the scroll-snap container 
$("#springBoard")[0].scrollLeft = 320

Кажется, это не связано с тем, как я запускаю прокрутку. Все эти методы прокрутки дают тот же результат:

$("#springBoard")[0].scrollLeft = 320
$("#springBoard").animate({scrollLeft: 320}, 1)
$("#springBoard > section:eq(1)")[0].scrollIntoView()
window.location.hash = "sectionId"
  • Ошибка при прокрутке вручную (см. комментарий @maxime ниже).
  • Он присутствует с версии 10.3.2 iOS.
  • Не знаю, исправлено ли это в iOS 11.

Я потратил пару дней, пытаясь решить проблему, но пока не добился успеха.

Вот урезанный пример моего навигатора:

Codepen Demo

Кто-нибудь знает способ обхода этой <забавной > глупой ошибки?
4b9b3361

Ответ 1

Пожалуйста, попробуйте вот так:

$('#springBoard').animate({scrollLeft: $('#springBoard').position().left + 320},1 );