Question

Chrome和Safari的最新版本均支持

CSS Snap Points，但是由于某些原因，my implementation（←CodePen链接，您可以尝试一下）无法捕捉。

我觉得我必须缺少明显的东西。任何帮助表示赞赏！

HTML：

<div id="treats"><a class="treat"><span></span></a><a class="treat"><span></span></a><a class="treat"><span></span></a><a class="treat"><span></span></a><a class="treat"><span></span></a></div>

CSS：

body {
    font: 16px/1.5 Helvetica, Sans-Serif;
    margin: 0;
    overflow-y: hidden;
    padding: 0;
    text-align: center;
}

#treats {
    height: 100vh;
    scroll-snap-type: x mandatory;
    width: 500vw;
}

.treat {
    display: inline-block;
    font-size: 50vw;
    height: 100vh;
    scroll-snap-align: center;
    text-shadow: rgba(0, 0, 0, 0.25) 0 0.25em 0.25em;
    transition: all 0.25s;
    width: 100vw;
}
    .treat:active {
        text-shadow: rgba(0, 0, 0, 0.25) 0 0.1em 0.1em;
        transform: translate3d(0, 0.025em, 0);
    }
    .treat span {
        display: block;
        margin-top: 33vh;
    }

.treat:nth-child(1) {
    background-color: #ffabab;
}
.treat:nth-child(2) {
    background-color: #ffdaab;
}
.treat:nth-child(3) {
    background-color: #ddffab;
}
.treat:nth-child(4) {
    background-color: #abe4ff;
}
.treat:nth-child(5) {
    background-color: #d9abff;
}

Answer 1

由于研究了@SahilDhir的评论，所以我能够完成这项工作。我的解决方案与他的解决方案略有不同，因此我将其发布在下面。具体来说，我只需要支持iOS，因此我取出了一些跨浏览器的CSS。我还用grid代替了flex来设置盒子。

body {
    font: 16px/1.5 Helvetica, Sans-Serif;
    margin: 0;
    overflow: hidden;
    padding: 0;
    text-align: center;
    width: 100vw;
}

#treats {
    display: grid;
    grid-template-columns: 100vw 100vw 100vw 100vw 100vw;
    height: 100vh;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    width: 100vw;
}

.treat {
    font-size: 50vw;
    height: 100vh;
    scroll-snap-align: start;
    text-shadow: rgba(0, 0, 0, 0.25) 0 0.25em 0.25em;
    transition: all 0.25s;
    width: 100vw;
}
    .treat:active {
        text-shadow: rgba(0, 0, 0, 0.25) 0 0.1em 0.1em;
        transform: translate3d(0, 0.025em, 0);
    }
    .treat span {
        display: block;
        margin-top: 33vh;
    }

.treat:nth-child(1) {
    background-color: #ffabab;
}
.treat:nth-child(2) {
    background-color: #ffdaab;
}
.treat:nth-child(3) {
    background-color: #ddffab;
}
.treat:nth-child(4) {
    background-color: #abe4ff;
}
.treat:nth-child(5) {
    background-color: #d9abff;
}

这里是updated CodePen showing it in action。

为什么我的CSS捕捉点不起作用？

1 个答案: