我有一个聊天小部件，每当我向上滚动时，它就会弹出一个消息数组。我现在面临的问题是，当消息加载时，滑块固定在顶部。我想让它关注上一个数组的最后一个索引元素。我发现我可以通过传递索引来进行动态引用，但我也需要知道使用哪种滚动函数来实现这一点
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
当前回答
这个解决方案适用于我在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];
};
你现在可以从react钩子API中使用useRef了
https://reactjs.org/docs/hooks-reference.html#useref
宣言
let myRef = useRef()
组件
<div ref={myRef}>My Component</div>
Use
window.scrollTo({ behavior: 'smooth', top: myRef.current.offsetTop })
使用findDOMNode最终将被弃用。
首选的方法是使用回调引用。
Github Eslint
如果你想在页面加载时做，你可以使用useLayoutEffect和useRef。
import React, { useRef, useLayoutEffect } from 'react'
const ScrollDemo = () => {
const myRef = useRef(null)
useLayoutEffect(() => {
window.scrollTo({
behavior: "smooth",
top: myRef.current.offsetTop,
});
}, [myRef.current]);
return (
<>
<div ref={myRef}>I wanna be seen</div>
</>
)
}
<div onScrollCapture={() => this._onScrollEvent()}></div>
_onScrollEvent = (e)=>{
const top = e.nativeEvent.target.scrollTop;
console.log(top);
}
