标签: react-scroll

我正在创建一个组件，该组件将保存动态元素列表，出于样式原因，我需要将每个部分的标题保留在粘性导航菜单中。当用户上下滚动部分列表时，我需要应用样式规则，并将菜单导航中的同一部分带入视图，因此我尝试将scrollIntoView与菜单部分引用一起使用。

我的内部工作和逻辑似乎按预期工作，但是存在一个问题 - 除非我检查或在页面上使用刷新，否则scrollIntoView的函数不会在每次状态更改时执行

const scrollTo = (ref) => {
  ref.current.scrollIntoView({ behavior: "smooth", inline: "center" });
};

为了简单起见，我已将我的工作添加到此codesandbox中

任何帮助将不胜感激，因为我已经没有想法了。

谢谢

编辑：

如果我从scrollIntoViewOptions选项中删除行为参数中的“smooth”选项，滚动行为似乎会按预期工作。然而它看起来确实很神经质。

const scrollToMenu = (ref) => {
  ref.current.scrollIntoView({ inline: "center", });
};

我正在使用 React 制作单个滚动页面，并希望导航到页面的特定部分。在 HTML 中，我们使用 href 和锚标记来实现这种交互。

我找到了一个名为 react-scroll 的 React 库，但我不知道如何从 NavBar 组件中的 a 链接链接不同文件夹中的每个组件。我的 NavBar 有多个链接用于滚动到一个部分/组件。任何帮助将不胜感激！

  import React, { Component } from "react";
  import { Link, animateScroll as scroll } from "react-scroll";
  class Navbar extends Component {

    render() {
      return (
        <nav className="navbar navbar-expand-lg navbar-dark">
          <Link className="navbar-brand" to="/">
            CMD <span>Custom Movie Database</span>
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon" />
          </button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
              <li className="nav-item ">
                <Link
                  className="nav-link" …

我尝试在导航栏中使用反应滚动，以便在单击任何导航元素时能够滚动到特定组件。

我一直在尝试遵循代码，但我似乎无法完全理解它。我在这里找到了一个很好的答案如何在单击导航栏链接时滚动到特定的目标组件

但我对此感到有点困惑。下面是我自己的代码，我希望将其保留为函数而不是将其更改为类：

    import React, { useState } from "react";
import "../Css/NavBar.css";
import Openclose from "./Openclose";
import Scroll from "react-scroll";
import { Link } from "react-scroll";

export default function NavBar() {
  const [isOpen, setIsOpen] = useState(false);

  const renderItems = () => {
    if (!isOpen) {
      return null;
    }
    return (
      <nav className="sidebar">
        <Scroll.ScrollLink
          to="/aboutme"
          spy={true}
          smooth={true}
          duration={500}
        >
          <Link to="/aboutme">About Me </Link>
        </Scroll.ScrollLink> // I'm just playing around with trying to make one work first.
        <li className="sidebar-link">About Me</li>
        <li …