發生的情況是，如果我向下滾動到主頁底部，單擊導航中的“租賃”，然后單擊導航中的徽標回傳主頁，主頁向下滾動到頁面底部而不是而不是保持在頂部（這是預期的）。如果所有頁面被向下滾動，導航離開并回傳，它們將向下滾動，所有頁面都會發生這種情況。即使硬重繪 瀏覽器或轉到其他網站然后查看我的網站，頁面仍會向下滾動。
我使用的是 Bootstrap 4。我重構為使用 Bootstrap 5，這是我注意到滾動的時候。所以我決定嘗試 React-Bootstrap 2.0.0 但問題仍然存在。
你可以在這里看到問題：https : //eoja82.github.io/lakeside-demo/
我正在使用的 Bootstrap 5.1.3 cdn 鏈接：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 鏈接，但沒有解決滾動問題。
uj5u.com熱心網友回復：
這種行為稱為滾動恢復。有一個 Gatsby 瀏覽器 ( gatsby-browser.js) API 允許您自動控制此行為，而不是useScrollRestoration像檔案建議的那樣在視圖組件中添加。您可以使用shouldUpdateScrollAPI：
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/
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/344566.html