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

【问题标题】：Jump to section when scrolled just a little bit - React滚动一点点时跳转到部分 - React
【发布时间】：2021-03-03 11:01:08
【问题描述】：

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

有点像here

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

【问题讨论】：

标签： javascript reactjs animation scroll

【解决方案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/

【讨论】：

【解决方案2】：

好的，我会尽力帮助你的

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

【讨论】：

【解决方案3】：

您可以使用FullPage js 或Swaper js 制作单页并逐段滚动

希望有用:)

【讨论】：

谢谢！ FullPage 准确地说明了我所追求的（如果我的领导同意付款，我们将使用这个）。但是，我以前使用过 swiper，但从未想过在这种情况下使用它。不确定它是否适用于滚动事件，你能告诉我吗？
swaper js 很棒，检查一下：swiperjs.com/demos#mousewheel-control | @Bambi007