七爪源码:如何滚动到 React 中的元素?

今天我们将学习如何在 reactJS 中滚动元素。在 React 中滚动到一个元素与其他框架有点不同。您可以自动或通过单击按钮来引用一个元素并滚动到它。

滚动定义为在计算机显示屏上水平、垂直或同时在图像、文本或图形上进行滑动效果移动。在开发网页时，您可以默认启用整个网页的滚动，也可以只启用需要滚动的区域。否则，您可以选择聘请 ReactJS 开发人员根据您的要求创建高度进步的 Web 应用程序。

HTML 元素接口和 React refs（references 的缩写）提供的 Element.scrollIntoView() 方法，可以使用 useRef() 钩子（用于功能组件）或 createRef() 方法（用于类组件）创建。如果你对钩子不太了解，请查看钩子的最佳实践以更好地使用 React 钩子。

在 React 中使用 Element.scrollIntoView() 方法滚动到一个元素：

此方法接受一个参数。

scrollIntoView() 方法将元素滚动到浏览器窗口的可见区域。

语法：

element.scrollIntoView(align)

element.scrollIntoView() 接受布尔值或对象：

element.scrollIntoView(alignToTop);

• alignToTop 是一个布尔值。

element.scrollIntoView(选项);

• 选项主要有 3 个属性

1. 封锁

2.行为

3.内联

1. 块：此属性定义垂直对齐。 它接受 4 个值：

• 开始
• 中央
• 结尾
• 最近的

默认设置值启动。

2. Behavior：behavior 属性定义了过渡动画。 它接受 2 个值：

• 汽车
• 光滑的

默认设置值为自动。

3. inline：属性定义水平对齐方式。 它接受 4 个值：

• 开始
• 中央
• 结尾
• 最近的

默认设置值是最接近的。

例子：

var element = document.getElementById("box");
element.scrollIntoView();element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior:"smooth", block: "end", inline:"nearest"});

使用 React Refs（参考）滚动到一个元素：

最简单的方法是使用 ref 来存储要滚动到的元素的引用。 并调用 myRef.current.scrollIntoView() 将其滚动到视图中。

React 中的 Refs 有许多不同的应用。 最常见的用途之一是引用 DOM 中的元素。 通过引用元素，您还可以获得访问元素的接口。 这对于捕获我们想要滚动到的元素至关重要。

useRef 返回一个可变的 ref 对象，其 .current 属性初始化为传递的参数 (initialValue)。 useRef() 不仅仅对 ref 属性有用。

const divRef = useRef(null);

在功能组件中：

import React, { useRef } from 'react';const App = () => {const scollToRef = useRef();return (<div className="container"><button onClick={() => scollToRef.current.scrollIntoView()}>Scroll</button><div ref={scollToRef}>scroll Me</div></div>);};export default App;

在类组件中：

class TestComponent extends Component {constructor(props) {super(props);this.testRef = React.createRef();}scrollToElement = () => this.testRef.current.scrollIntoView();render() {return <div ref={this.testRef}>Element you want in view</div>;}}

滚动到确切位置：

在这部分中，react 提供了内置函数 scrollTo。

语法：

scrollTo(x, y)

以上函数在本机平台中使用。

例子：

const ref = useAnimatedRef();ref.current.scrollTo({ x, y });

useAnimatedRef():- useAnimatedRef 是标准 React 的 ref 的 Reanimated 扩展。

x-cord：- 要在左上角显示的元素的水平轴。

y-cord：- 要在左上角显示的元素的垂直轴。

反应哈希滚动：

React Hash Scroll 是许多 React 项目中使用的流行库。 它旨在成为实现哈希路由的最简单方法。

import { HashScroll } from "react-hash-scroll";

只需将此库添加到您的代码中。示例：

import React from "react";import { Link } from "react-router-dom";import { HashScroll } from "react-hash-scroll";const HashScrollPage = () => {return (<main className="page"><nav><ul><li><Link to="/hash-scroll#hash-section-1">Go To Section 1</Link></li><li><Link to="/hash-scroll#hash-section-2">Go To Section 2</Link></li></ul></nav><article><HashScroll hash="#hash-section-1"><section>Section 1</section></HashScroll><HashScroll hash="#hash-section-2"><section>Section 2</section></HashScroll></article></main>);};export default HashScrollPage;

结论：

因此，在本文中，我们研究了如何滚动元素。 我们在文章中展示了多种方法和属性的使用。 此外，了解新图书馆。 我们可以直接在Outer Code中使用。

感谢您阅读我们的文章。 希望你喜欢阅读！