Css 滚动捕捉错误 iOS 10

Posted 2023-03-05

【中文标题】Css 滚动捕捉错误 iOS 10

【英文标题】：Css scroll-snap bug iOS 10

【发布时间】：2017-12-25 04:16:21

【问题描述】：

我注意到 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 评论）。 它从 iOS 10.3.2 版本开始存在。 不知道 iOS 11 是否已修复。

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

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

Codepen Demo

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

【问题讨论】：

如果我导航然后点击Change Content按钮，它会停留在同一个快照点。只有当我在没有进行任何滚动的情况下单击按钮时才会出现错误。

您是否尝试过以编程方式滚动页面？ window.scrollTo(0, 0); //or some variant

感谢您的建议，我尝试滚动窗口但没有解决问题。

bugzilla.mozilla.org/show_bug.cgi?id=1331632

这个功能仍然是实验性的。在 Mac OSX 上的 Safari 中，当您在溢出框webkit.org/demos/scroll-snap 垂直对齐滚动时，它会继续滚动页面@ Chrome 甚至还不支持它。到目前为止，最好使用 JS。

【参考方案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%;
    

【参考方案2】：

请尝试这样：

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

【讨论】：

Position().left 将始终返回 0。另外，为什么要为元素设置 320 毫秒的动画？我代码中的 320 指的是 iPhone SE 的宽度。这对我来说毫无意义。

对不起，我想在职位上加上这个。但这是我的错。 $('#springBoard').animate(scrollLeft: $('#springBoard').position().left + 320, 1);