如何在点击页面导航链接时停止屏幕滚动-引导和盖茨比
如何在点击页面导航链接时停止屏幕滚动-引导和盖茨比
提问于 2021-10-28 20:40:17
如果我向下滚动到主页的底部，点击导航中的“租房”，然后点击导航中的徽标返回主页，主页向下滚动到页面的底部，而不是停留在顶部(所期望的)。这发生在所有的页面，如果他们被访问，向下滚动，导航和后退，他们将向下滚动。即使是硬浏览器刷新或转到不同的网站，然后查看我的网站，该页仍将向下滚动。
我用的是引导带4，我重新分解到使用引导带5，这时我注意到了滚动。因此，我决定尝试React Bootstra2.0.0，但问题仍然存在。
您可以在这里看到问题：https://eoja82.github.io/lakeside-demo/
我使用的引导5.1.3 cdn链接：
<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;我尝试使用引导4CDN链接，这没有修复滚动问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-29 04:57:07
这种行为称为涡旋恢复。有一个Gatsby (gatsby-browser.js) API，允许您自动控制这种行为，而不是像文档建议的那样在视图组件中添加useScrollRestoration。您可以使用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
}另一个解决办法是：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69760669
复制相关文章
相似问题
腾讯云开发者
