scroll-snap-type: x 不能在移动设备上工作，但可以在网络上工作

Question

我已经实现了这个带有自动 X 滚动的轮播：

https://codepen.io/Schepp/pen/WNbQByE

效果很好！一件事，它在移动设备上效果不佳。它卡在第一个图像上并且不起作用。发生在 iOS 和 android 上，甚至在查看检查器 (cmd+shift+c) 和切换设备工具栏 (cmd+shift+m​​) 以查看移动设备时也会发生。

为什么滚动快照不适用于移动设备？

如上所述检查切换设备工具栏时，这可以在 codepen 链接上重现，但如果有帮助，这是我的代码：

HTML：

<div class="about-slides-container">
    <section class="carousel" aria-label="Gallery">
        <ol class="carousel__viewport">
        <li id="carousel__slide2"
            tabindex="0"
            class="carousel__slide">
            <img class="canvas-block-image about-me-image" src="./assets/9.jpeg" alt="About">
            <div class="carousel__snapper"></div>
        </li>
        <li id="carousel__slide1"
            tabindex="0"
            class="carousel__slide">
            <img class="canvas-block-image about-me-image" src="./assets/8.jpeg" alt="About">
            <div class="carousel__snapper">
            </div>
        </li>

        </aside>
    </section>
</div>

CSS：

    @keyframes tonext {
        75% {
        left: 0;
        }
        95% {
        left: 100%;
        }
        98% {
        left: 100%;
        }
        99% {
        left: 0;
        }
    }
    
    @keyframes tostart {
        75% {
        left: 0;
        }
        95% {
        left: -300%;
        }
        98% {
        left: -300%;
        }
        99% {
        left: 0;
        }
    }
    
    @keyframes snap {
        96% {
        scroll-snap-align: center;
        }
        97% {
        scroll-snap-align: none;
        }
        99% {
        scroll-snap-align: none;
        }
        100% {
        scroll-snap-align: center;
        }
    }

  
    ol, li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .carousel {
        position: relative;
        height: 100%;
        filter: drop-shadow(0 0 10px #0003);
        perspective: 100px;
        width: 100%;
        pointer-events: none;
    }
    
    .carousel__viewport {
        pointer-events: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        counter-reset: item;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        -webkit-scroll-snap-type: x mandatory;
    }
    
    .carousel__slide {
        position: relative;
        flex: 0 0 100%;
        width: 100%;
        counter-increment: item;
    }
    
    .carousel__snapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        scroll-snap-align: center;
    }
    
    @media (hover: hover) {
        .carousel__snapper {
        animation-name: tonext, snap;
        animation-timing-function: ease;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        }
    
        .carousel__slide:last-child .carousel__snapper {
        animation-name: tostart, snap;
        }
    }
    
    @media (prefers-reduced-motion: reduce) {
        .carousel__snapper {
        animation-name: none;
        }
    }

Answer 1

有趣的问题，很酷的例子！我认为这里有几件事。首先取决于您使用的设备，您可能会遇到浏览器支持问题：https://caniuse.com/?search=scroll%20snap

但我会质疑纯 CSS 滑块的使用，除非它只是一个实验。它本质上是错误的，问题不仅在移动设备上，在桌面设备上也很快出现故障。您还可以让每张幻灯片都需要自己的一对上一个/下一个按钮，这些按钮与幻灯片编号有内在联系。

您决定采用纯 CSS 解决方案有什么特别的原因吗？

Answer 2

<div class="about-slides-container">
    <section class="carousel" aria-label="Gallery">
        <ol class="carousel__viewport">
        <li id="carousel__slide2"
            tabindex="0"
            class="carousel__slide">
            <img class="canvas-block-image about-me-image" src="./assets/9.jpeg" alt="About">
            <div class="carousel__snapper"></div>
        </li>
        <li id="carousel__slide1"
            tabindex="0"
            class="carousel__slide">
            <img class="canvas-block-image about-me-image" src="./assets/8.jpeg" alt="About">
            <div class="carousel__snapper">
            </div>
        </li>
(Add)---></ol>
 (Remove)---></aside>
    </section>
</div>