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

Question

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

有点像here

编辑：这不是锚点菜单案例。

Answer 1

您可以使用 FullPage js or Swaper js 使单个页面逐节滚动

希望有用:)

Answer 2

好的，我会尽力帮助你

window.scrollTo(x, y) - 将页面滚动到相对于整个文档的指定坐标。

Answer 3

这是一个使用 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>

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

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

Jump to section when scrolled just a little bit - React

javascript

animation

scroll

reactjs