前言:
现在各位老铁们对“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滚动到元素