javascript - React Scroll 和 scroll-snap-type 的问题

Question

我正在尝试使用 scroll-snap-type: y proximity;，但它不适用于 react-scroll。我发现页面在 HTML 标记中滚动，当我设置overflow: hidden;为：html、、然后和时，body滚动无法正常工作。我的意思是你可以滚动，但不幸的是，你不能使用平滑滚动并且页面有问题。所以不是那样，我想以某种方式设置为 HTML 标签和他们的孩子。.appoverflow: scrollheight: 100vh;app__contentscroll-snap-type: y proximity;scroll-snap-align: start;

应用程序.js：

import './App.scss';
import Home from './components/Home/Home';
import {
  Switch,
  Route,
} from "react-router-dom";
import Nav from './components/Navigation/Nav';
import About from './components/About/About';
import Skills from './Skills/Skills';
import Projects from './components/Projects/Projects';


function App() {
  return (
    <div className="app">
      <Nav/>
      <div className="app__content">
          <Home name="home"/>
          <About name="about"/>
          <Skills name="skills"/>
          <Projects name="projects"/>
      </div>
    </div>
  );
}

export default App;

导航.js：

import "./Nav.scss";
import { useEffect, useState } from "react";
import { Link, animateScroll as scroll } from "react-scroll";

const Nav = () => {
  const toggleHome = () => {
    scroll.scrollToTop();
  };
  return (
    <>
      <nav className="nav">
        <div className="nav__avatar">
          <h3>
            <Link onClick={toggleHome} to="/">
              DS
            </Link>
          </h3>
        </div>
        <ul className="nav__list">
          <li>
            <Link
              smooth={true}
              spy={true}
              duration={500}
              offset={-80}
              exact="true"
              className="nav__underline"
              activeClass="active"
              to="home"
            >
              Home
            </Link>
          </li>
          <li>
            <Link
              smooth={true}
              spy={true}
              duration={500}
              exact="true"
              offset={-80}
              className="nav__underline"
              activeClass="active"
              to="about"
            >
              About
            </Link>
          </li>
          <li>
            <Link
              smooth={true}
              spy={true}
              duration={500}
              exact="true"
              offset={-80}
              className="nav__underline"
              activeClass="active"
              to="skills"
            >
              Skills
            </Link>
          </li>
          <li>
            <Link
              smooth={true}
              spy={true}
              duration={500}
              exact="true"
              className="nav__underline"
              activeClass="active"
              to="projects"
            >
              Projects
            </Link>
          </li>
        </ul>
        <div className="nav__link">
          <Link to="/contact">Contact</Link>
        </div>
      </nav>
    </>
  );
};

export default Nav;

应用程序.scss：

  html{
    overflow: scroll;
    scroll-snap-type: y mandatory;
  }
  // components
  section{
    scroll-snap-align: start;
  }

如果有不清楚的地方随时问:)

标签： javascripthtmlcssreactjsscroll