Css 滚动捕捉在 N 处开始可见元素

Question

目前我正在制作一个布局，用户可以左右滑动以访问页面上的不同部分。我试图找到一个解决方案，也在官方规范中，但没有成功。

我想实现滚动捕捉，其中起始元素是第二个 (N) div (.fridge)，同时允许左右滑动/捕捉。

我比较喜欢CSS，不过js没问题

现在发生的是：商店（从这里开始）- 冰箱 - 商店

我想要什么商店 - 冰箱（从这里开始） - 商店允许我左右滑动

    body {
        margin: 0;
    }

    .horizontal-snap {
        display: grid;
        grid-auto-flow: column;
        width: 100vw;
        height: 100vh;
        overflow-y: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
    }

    .horizontal-snap .slide {
        scroll-snap-align: center;
        width: 100vw;
        height: 100vh;
        max-width: none;
        object-fit: contain;
    }

    .shop {
        background-color: #efdefe;
    }

    .fridge {
        background-color: #a3f3d3;
    }

    .recipe {
        background-color: #0bbaa0;
    }

<div class="horizontal-snap">
    <div class="slide shop">
        <h1>shop</h1>
    </div>
    <div class="slide fridge">
        <h1>fridge</h1>
    </div>
    <div class="slide recipe">
        <h1>Recipe</h1>
    </div>
</div>

Answer 1

您需要使用 Javascript

const element = document.getElementsByClassName('fridge')[0];
document.getElementsByClassName('horizontal-snap')[0].scrollLeft = element.offsetLeft;

body {
            margin: 0;
        }

        .horizontal-snap {
            display: grid;
            grid-auto-flow: column;
            width: 100vw;
            height: 100vh;
            overflow-y: auto;
            overscroll-behavior-x: contain;
            scroll-snap-type: x mandatory;
        }

        .horizontal-snap .slide {
            scroll-snap-align: center;
            width: 100vw;
            height: 100vh;
            max-width: none;
            object-fit: contain;
        }

        .shop {
            background-color: #efdefe;
        }

        .fridge {
            background-color: #a3f3d3;
        }

        .recipe {
            background-color: #0bbaa0;
        }

<div class="horizontal-snap">
    <div class="slide shop">
        <h1>shop</h1>
    </div>
    <div class="slide fridge">
        <h1>fridge</h1>
    </div>
    <div class="slide recipe">
        <h1>Recipe</h1>
    </div>
</div>

Css 滚动捕捉在 N 处开始可见元素

Css scroll snap start visible element at N

html

javascript

css

grid