I've been attempting to implement the snap scroll feature in my react app, but I'm facing issues with it. The regular CSS method doesn't seem to work well in Chrome, as discussed in this Scroll Snap Skips Section on Smaller Screen - Chrome thread.
As an alternative, I decided to use the package available at https://www.npmjs.com/package/react-use-scroll-snap. However, even after integrating it, the snap scroll feature does not function correctly (no snapping occurs while scrolling).
Expected behavior: As I scroll down, the view should automatically snap to the "FIRST" div, then to the "SECOND" div, and so on.
I'm unsure of what I might be missing or doing wrong here. Any insights would be greatly appreciated.
Thank you.
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);
}
}
}