React快速滚动不起作用

Question

我正试图让快照滚动功能在我的react应用程序中发挥作用。我试过使用普通的CSS方法，但它在chrome中不起作用，正如小屏幕上滚动快照跳过部分所提到的那样——chrome。

所以我决定在https://www.npmjs.com/package/react-use-scroll-snap.但是快速滚动功能根本不起作用。(当滚动时，没有如预期的那样发生"弹出"(

预期行为：当向下滚动时，视图应捕捉到"；第一个"；CCD_ 1然后到"0"；第二个"；div等。

我做错了什么？我是不是错过了一些基本的东西？

谢谢。

App.jsx

import useScrollSnap from 'react-use-scroll-snap';
import React, { useRef } from "react";
import Topbar from "./components/topbar/Topbar";
import "./app.scss";
function App() {
const scrollRef = useRef(null);
useScrollSnap({ ref: scrollRef, duration: 100, delay: 50 });
return (
<div className="App">
<Topbar></Topbar>
<div className="sections" ref={scrollRef}>
<div>FIRST
</div>
<div>SECOND
</div>
<div>THIRD
</div>
<div>FOURTH
</div>
</div>
</div>
);
}
export default App;

app.scss

.App{
height: 100vh;
.sections{
width: 100%;
height: calc(100vh - 70px);
background-color: lightblue;
position: relative;
top: 70px;
scroll-behavior: smooth;
> *{
width: 100vw;
height: calc(100vh - 70px);
}
}
}

Answer 1

我找到了解决问题的方法。包裹https://www.npmjs.com/package/scroll-snap给出了我想要的结果。

它适用于chrome，但不适用于firefox；我认为这是一个小问题，因为包的文档说它支持所有现代浏览器。