javascript - 滚动一点点时跳转到部分 - React

Question

抱歉这个蹩脚的标题。我正在寻找在我的网站上使用的解决方案，其中包含几个高度为 100vh 的部分。案例:当用户滚动一点点时，页面会根据滚动方向滚动到下一个或上一个部分。

有点像here

编辑:这不是 anchor 菜单案例。

Answer 1

这是一个使用 css scroll-snap 特性的工作示例。这对我来说是最好的解决方案，因为您不需要做太多事情或使用任何外部代码。

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Helvetica', sans-serif;
}

/* All the snapping stuff */
.scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

section {
    height: 100vh;
    scroll-snap-align: center;
}

/* Other styles */
section {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: darkorchid;
}

section:nth-child(2n) {
    background-color: turquoise;
}

section:nth-child(3n) {
    background-color: tomato;
}

<main class="scroll-container">
    <section>
        <h2>Section 1</h2>
    </section>
    <section>
        <h2>Section 2</h2>
    </section>
    <section>
        <h2>Section 3</h2>
    </section>
    <section>
        <h2>Section 4</h2>
    </section>
</main>

这里是其他可能适合您的选项的链接:https://24ways.org/2019/beautiful-scrolling-experiences-without-libraries/