React项目常遇到滚动元素或页面 到 顶部位置（或指定位置）
方案一：操作window 滚动页面到顶部
window.scrollTo(x, y)
// x轴方向px数值
// y轴方向px数值
window.scrollTo(0, 0) 滚动到左上角指定数值可以滚动到指定位置
.
方案二：用 useRef 得到指定元素操作
import React, { useRef } from "react";
function DEMO() {
const pageView = useRef(null);
function handleClick() {
pageView.current.scrollTop = 0;
}
return (
ref={pageView} onClick={handleClick} style={{height: '100vh', overflow: "scroll"}} > 点击回到顶部
)
};
export default DEMO;
定义：overflow 和 height元素： 滚动 外层元素
.
方案三：用 scrollIntoView 指定元素滚动
import React from "react";
function DEMO() {
function handleClick() {
let getEle = document.getElementById('pageView');
getEle.scrollIntoView();
}
return (
onClick={handleClick} style={{ height: '100vh', overflow: "scroll" }} > 回到顶部
)
};
export default DEMO;
元素： 内层元素，让哪个元素到顶部获取该元素scrollIntoView() 滚动样式，查看：https://blog.csdn.net/weixin_44461275/article/details/120778081
.
方案四：原生JS 操作指定元素滚动
import React from "react";
function DEMO() {
function handleClick() {
document.getElementById('pageView').scrollTop = 0;
}
return (
id='pageView' onClick={handleClick} style={{height: '100vh', overflow: "scroll"}} > 点击回到顶部
)
};
export default DEMO;
好了，到此结束，有问题留言。若对你有帮助，点赞收藏支持下
本文由 用户 于 2023-10-28 发布在 夸智网，如有疑问，请联系我们。
本文链接：https://www.kuazhi.com/post/608442.html
发表评论