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"

手动滚动时不会发生错误（请参阅下面的@ maxime＆＃39;评论）。
它自iOS版本10.3.2以来一直存在。
不知道它是否已在iOS 11中修复。

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

这是我导航的精简示例：

Codepen Demo

愚蠢

Answer 1

我创建了自己的HORIZONTAL jquery scroll-snap，它在页面加载，窗口调整大小和滚动容器时触发 - 这个防止任何需要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 );

Css scroll-snap bug iOS 10

2 个答案: