Css scroll-snap bug iOS 10

Question

我注意到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"

1. 手动滚动时不会发生错误(请参阅下面的@maxime评论).
2. 它出现在iOS版本10.3.2以后.
3. 不知道它是否已在iOS 11中修复.

我花了几天时间试图解决这个问题但到目前为止没有成功.

这是我的导航的精简示例:

Codepen Demo

有没有人知道绕过这个愚蠢的 bug？

Answer 1

请尝试这样：

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