单击页面导航链接时如何停止屏幕滚动，React-Bootstrap 和 Gatsby

Question

如果我向下滚动到主页底部，点击导航中的“租赁”，然后点击导航中的标志返回主页，主页会向下滚动到页面底部而不是停留在顶部（这是预期的）。如果向下滚动访问页面，导航离开并返回它们将向下滚动，所有页面都会发生这种情况。即使浏览器硬刷新或转到其他网站然后查看我的网站，页面仍会向下滚动。

我正在使用 Bootstrap 4。我重构为使用 Bootstrap 5，这是我注意到滚动的时候。所以我决定尝试 React-Bootstrap 2.0.0 但问题仍然存在。

您可以在此处查看问题：https://eoja82.github.io/lakeside-demo/

Bootstrap 5.1.3 cdn link 我正在使用：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

这是我的导航：

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import styles from "./styles/nav.module.css"
import { withPrefix } from "gatsby"
import Container from "react-bootstrap/Container"
import Nav from "react-bootstrap/Nav"
import Navbar from "react-bootstrap/Navbar"
import NavDropdown from "react-bootstrap/NavDropdown"


function Navigation() {
  /* const activeStyles = {
    color: "rgb(255, 255, 255, .75)"
  } */
  return (
    <StaticQuery id={styles.container}
      query={graphql`
        query SlugQuery {
          allDataJson {
            nodes {
              slug
            }
          }
        }
      `}
      render={data => (
        <Navbar collapseOnSelect expand="sm" variant="dark" bg="dark" fixed="top" style={{"--bs-bg-opacity": ".9"}}>
          <Container fluid>
            <Navbar.Brand href={withPrefix("/")}>
              <img 
                src={withPrefix("/img/logo.png")} 
                alt="logo" 
                width="87.5px" height="50px">
              </img>
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
              <Nav className="me-auto">
                <NavDropdown title="Products" id="collapsible-nav-dropdown">
                  {data.allDataJson.nodes.map(({slug}, i) => {
                      let split = slug.split("/")
                      let listItem = split[2].replace(/-/g, " ")
                      return (
                        <NavDropdown.Item href={withPrefix(slug)} key={i} className={styles.dropdownItem}>{listItem}</NavDropdown.Item>
                      )
                    })}
                </NavDropdown>
                <Nav.Link href={withPrefix("/rental")}>Rental</Nav.Link>
                <Nav.Link href={withPrefix("/specials")}>Specials</Nav.Link>
                <Nav.Link href={withPrefix("/contact")}>Contact</Nav.Link>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
      )}
    />
  )
}

export default Navigation;

我尝试使用 bootstrap 4 cdn link，但没有解决滚动问题。

Answer 1

这种行为被称为 scroll restoration. There's a Gatsby Browser (gatsby-browser.js) API that allows you to control this behavior automatically rather than adding the useScrollRestoration in the view component as the docs suggests. You can use shouldUpdateScroll API:

exports.shouldUpdateScroll = () => { return false; };

或自定义某些页面的滚动条：

exports.shouldUpdateScroll = ({
  routerProps: { location },
  getSavedScrollPosition,
}) => {
  const { pathname } = location
  // list of routes for the scroll-to-top-hook
  const scrollToTopRoutes = [`/privacy-policy`, `/page-2`]
  // if the new route is part of the list above, scroll to top (0, 0)
  if (scrollToTopRoutes.includes(pathname)) {
    window.scrollTo(0, 0)
  }

  return false
}

另一个解决方法：

https://www.joshwcomeau.com/gatsby/the-worlds-sneakiest-route-change/

单击页面导航链接时如何停止屏幕滚动，React-Bootstrap 和 Gatsby

How to stop screen scrolling when page navigation links are clicked, React-Bootstrap and Gatsby

twitter-bootstrap

reactjs

react-bootstrap

gatsby