Css 滚动捕捉错误 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

有谁知道解决这个 stupid 错误的方法吗？

Answer 1

我创建了自己的水平 jquery 滚动快照，它在 页面加载、窗口调整大小和 容器滚动时触发 - 这个防止对 css 的任何需求：

$(".container").scroll(function() {

下面的 if/else 语句是如果您计划根据页面宽度更改对象的宽度。如果没有，你可以删除它并设置 var width = 你的默认宽度

   var width = 1; //100% - default value / small screen
    if(window.innerWidth >= 993) //large screen
         width = 1/4; //25%
    else if(window.innerWidth >= 601) //medium screen
        width = 1/3; //33.333%

    var containerWidth = $(".container").width();
    var sectionWidth = containerWidth * width; //gets the length of each section

    var currentScroll = $(".container").scrollLeft();
    var farOff = currentScroll % sectionWidth; //determines how far user is from the beginning of the current section
    if(farOff == 0) //just for efficiency
        return;

    clearTimeout($.data(this, 'scrollTimer'));

    $.data(this, 'scrollTimer', setTimeout(function() {
        if(farOff >= sectionWidth/2) //scroll-snaps to next section
            $(".container").animate({
                scrollLeft: (currentScroll + sectionWidth - farOff),
            });
        else //scroll-snaps to previous section
            $(".container").animate({
                scrollLeft: (currentScroll - farOff),
            });
    }, 550));
});

下面是与我的滚动快照示例一起使用的 CSS

div.container{
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    -o-overflow-scrolling: scroll;
    -moz-overflow-scrolling: scroll;
    overflow-y: hidden;
    white-space: nowrap !important;
}
.container section{
    display: inline-block;
    padding: 10px;
    width:100%;
    vertical-align: top;
    margin-bottom: 10px;
}
.container > section > div{
    overflow: initial;
    white-space: normal;
}
@media (min-width: 601px){ /* medium */
    .container section{
        width: 33.33333333%;
    }
}
@media (min-width: 952px){ /* large */
    .container section{
        width: 25%;
    }
}

Answer 2

请尝试这样：

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