Question

Css快照点是javascript基础解决方案的一个很好的替代品。我意识到这不是最终规范，但是webkit已经采用了css快点。

但是，如果启用支持移动网络应用程序的meta，则会失败

如果您在Safari中打开它，例如ipad，则效果很好。忽略按钮，只需滚动即可。现在将此jsfiddle固定到主屏幕并使用新创建的快捷方式打开它。支持移动网络应用程序的jsfiddle并打破快照点功能：您现在可以平滑滚动而不是快照。

使用polyfill作为后备并不能解决问题。任何建议，而不是回到完整的JavaScript解决方案？

<html>
<style type="text/css">
* {
    box-sizing: border-box;
}

ol {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    height: 100px;
    width: 500px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    -webkit-scroll-snap-type: mandatory;

    -ms-scroll-snap-type: mandatory;

    scroll-snap-type: mandatory;
    -webkit-scroll-snap-points-x: repeat(100%);
    -ms-scroll-snap-points-x: repeat(100%);
    scroll-snap-points-x: repeat(100%);
    //scroll-snap-destination: 50% 50%;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

li {
    display: inline-block;
    border: 2px solid #000;
    height: 100px;
    width: 100%;
}

.a {
    background-color: green;
}
.b {
    background-color: yellow;
}
.c {
    background-color: gray;
}
</style>
<body>
<ol>
            <li class="a"></il>
            <li class="b"></il>
            <li class="c"></il>
            <li class="d"></il>
            <li class="e"></il>
            <li class="f"></il>
            <li class="g"></il>
            <li class="h"></il>
</ol>
<button id="scroll-to-c">Scroll to C</button>
</body>
</html>

Answer 1

iOS 11要求滚动捕捉工作的规范草案的新增内容。将scroll-snap-align: start;添加到滚动项目中。 [来源：https://www.filamentgroup.com/lab/keep-snap-points-snapping.html]

Css滚动快照不适用于支持Apple移动网络

1 个答案: