我有一个聊天小部件，每当我向上滚动时，它就会弹出一个消息数组。我现在面临的问题是，当消息加载时，滑块固定在顶部。我想让它关注上一个数组的最后一个索引元素。我发现我可以通过传递索引来进行动态引用，但我也需要知道使用哪种滚动函数来实现这一点
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
当前回答
最好的方法是使用element。scrollIntoView({behavior: 'smooth'})。这将以漂亮的动画将元素滚动到视图中。
当你将它与React的useRef()结合使用时，可以通过以下方式完成。
import React, { useRef } from 'react'
const Article = () => {
const titleRef = useRef()
function handleBackClick() {
titleRef.current.scrollIntoView({ behavior: 'smooth' })
}
return (
<article>
<h1 ref={titleRef}>
A React article for Latin readers
</h1>
// Rest of the article's content...
<button onClick={handleBackClick}>
Back to the top
</button>
</article>
)
}
当你想要滚动到React组件时，你需要将引用转发给渲染的元素。本文将深入探讨这个问题。
其他回答
您可以使用componentDidUpdate之类的东西
componentDidUpdate() {
var elem = testNode //your ref to the element say testNode in your case;
elem.scrollTop = elem.scrollHeight;
};
你可以这样尝试:
handleScrollToElement = e => {
const elementTop = this.gate.offsetTop;
window.scrollTo(0, elementTop);
};
render(){
return(
<h2 ref={elem => (this.gate = elem)}>Payment gate</h2>
)}
你可以使用useRef和scrollIntoView。
使用useReffor你想滚动到的元素:这里我想滚动到PieceTabs元素，这就是为什么我用一个盒子(div)包装它，这样我就可以访问dom元素
您可能对refs很熟悉，它主要是作为一种访问DOM的方式。如果你传递一个ref对象给React, React会在相应的DOM节点发生变化时将其.current属性设置为相应的DOM节点。看医生
...
const tabsRef = useRef()
...
<Box ref={tabsRef}>
<PieceTabs piece={piece} value={value} handleChange={handleChange} />
</Box>
...
创建一个处理滚动的函数:
const handleSeeCompleteList = () => {
const tabs = tabsRef.current
if (tabs) {
tabs.scrollIntoView({
behavior: 'smooth',
block: 'start',
})
}
}
当你点击滚动到目标时，在你想要的元素上调用这个函数:
<Typography
variant="body2"
sx={{
color: "#007BFF",
cursor: "pointer",
fontWeight: 500,
}}
onClick={(e) => {
handleChange(e, 2);
handleSeeCompleteList(); // here we go
}}
>
Voir toute la liste
</Typography>;
好了
这个解决方案适用于我在ReactJS
在header.js
function scrollToTestDiv(){
const divElement = document.getElementById('test');
divElement.scrollIntoView({ behavior: 'smooth' });
}
<a class="nav-link" onClick={scrollToTestDiv}> Click here! </a>
在index . html
<div id="test"></div>
如果有人在使用Typescript，下面是Ben Carp的答案:
import { RefObject, useRef } from 'react';
export const useScroll = <T extends HTMLElement>(
options?: boolean | ScrollIntoViewOptions
): [() => void, RefObject<T>] => {
const elRef = useRef<T>(null);
const executeScroll = (): void => {
if (elRef.current) {
elRef.current.scrollIntoView(options);
}
};
return [executeScroll, elRef];
};
