龙空技术网

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

庄志炎 374

前言:

现在各位老铁们对“js滚动到元素”都比较讲究,朋友们都想要学习一些“js滚动到元素”的相关内容。那么小编也在网摘上网罗了一些关于“js滚动到元素””的相关知识,希望各位老铁们能喜欢,大家快快来了解一下吧!

今天我们将学习如何在 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中使用。

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

标签: #js滚动到元素