反应快照滚动不起作用答案

【问题标题】：React snap scroll not functioning反应快照滚动不起作用
【发布时间】：2021-06-19 18:35:26
【问题描述】：

我正在尝试在我的 react 应用程序中使用快速滚动功能。我试过使用普通的 CSS 方法，但它在 chrome 中不起作用，如 scroll-snap skips section on smaller screen - Chrome 中所述。

所以我决定使用https://www.npmjs.com/package/react-use-scroll-snap 的软件包。但是快速滚动功能根本不起作用。（滚动时，没有按预期发生“捕捉”）

预期行为：向下滚动时，视图应捕捉到“FIRST”div，然后捕捉到“SECOND”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);
        }
    }
}

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

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

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

【讨论】：

我也在尝试使用这个包，但是如何让它在 firefox 上工作？