我有一个聊天小部件，每当我向上滚动时，它就会弹出一个消息数组。我现在面临的问题是，当消息加载时，滑块固定在顶部。我想让它关注上一个数组的最后一个索引元素。我发现我可以通过传递索引来进行动态引用，但我也需要知道使用哪种滚动函数来实现这一点
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
当前回答
我有一个简单的场景，当用户点击我的材质UI导航栏的菜单项时，我想要向下滚动到页面上的部分。我可以使用引用和线程他们通过所有的组件，但我讨厌线程道具通过多个组件，因为这使得代码脆弱。
我只是在我的react组件中使用了香草JS，结果证明它工作得很好。在我想要滚动的元素上放置一个ID，在我的头组件中，我只是这样做了。
const scroll = () => {
const section = document.querySelector( '#contact-us' );
section.scrollIntoView( { behavior: 'smooth', block: 'start' } );
};
其他回答
只是提醒一下，我无法让这些解决方案在Material UI组件上工作。看起来他们没有当前的属性。
我只是在我的组件中添加了一个空div，并设置了ref prop。
对于读到这篇文章的人来说，如果他们没有那么幸运地使用上述解决方案，或者只是想要一个简单的即时解决方案，那么这个软件包对我来说很有用:https://www.npmjs.com/package/react-anchor-link-smooth-scroll。黑客快乐!
只需找到您已经确定的元素的顶部位置https://www.w3schools.com/Jsref/prop_element_offsettop.asp，然后通过scrollTo方法https://www.w3schools.com/Jsref/met_win_scrollto.asp滚动到这个位置
像这样的东西应该工作:
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
window.scrollTo(0, tesNode.offsetTop);
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
更新:
因为React v16.3 React. createref()是首选
constructor(props) {
super(props);
this.myRef = React.createRef();
}
handleScrollToElement(event) {
if (<some_logic>){
window.scrollTo(0, this.myRef.current.offsetTop);
}
}
render() {
return (
<div>
<div ref={this.myRef}></div>
</div>)
}
您可以使用componentDidUpdate之类的东西
componentDidUpdate() {
var elem = testNode //your ref to the element say testNode in your case;
elem.scrollTop = elem.scrollHeight;
};
为了自动滚动到特定的元素，首先需要使用文档选择该元素。getElementById，然后我们需要使用scrollIntoView()滚动。请参考以下代码。
scrollToElement= async ()=>{
document.getElementById('id001').scrollIntoView();
}
上述方法对我来说很有效。
