滚动到赫什元素

不再需要作为依赖性的反应路线!

此组件启用 散列/锁定链接 以在 React 应用程序内运行.

它通过听 散列财产 window.location 并滚动到匹配元素(如果存在).

这原本是为了解决散列链接不再与 反应路由器 v6+,并且作为依赖而要求的反应路由器。 然而,它被重新设计为与任何路由器合作(或缺乏路由器).

滚动本身由本地浏览器方法提供 元素. scroll Into View ()

安装

用 npm 或纱线安装软件包

npm install @cascadia-code/scroll-to-hash-element

只要把这个组件放置在应用程序的顶层 并在背景中被动工作.

import React from "react";
import ScrollToHashElement from "@cascadia-code/scroll-to-hash-element";

import Header from "./Header";
import Content from "./Content";

const App = () => {
  return (
    <div className="grid">
      <ScrollToHashElement />
      <Header />
      <Content />
    </div>
  );
};

export default App;

使用量

创建散列链接

与反应- 路透社

你可以像平常那样创建React-Router链接. 例如,主页上的散列元素的链接就会像这样

<Link to="/#some-div-id">Link Text</Link>

或这个

<Link to="#some-div-id">Link Text</Link>

这样子页面

<Link to="/about#story">Our Story</Link>

无反应- 路透

可以创建标准锚标记. 例如,主页上的散列元素的链接就会像这样

<a href="/#some-div-id">Link Text</a>

或这个

<a href="#some-div-id">Link Text</a>

这样子页面

<a href="/about#story">Our Story</a>

自定义滚动行为

可以通过将道具传递到 Scroll ToHashElement 组件来自定义滚动行为.

<ScrollToHashElement behavior="smooth" inline="center" block="center" />

您可以在此读取更多关于这些属性 : 元素. scroll Into View ()