我有一个聊天小部件，每当我向上滚动时，它就会弹出一个消息数组。我现在面临的问题是，当消息加载时，滑块固定在顶部。我想让它关注上一个数组的最后一个索引元素。我发现我可以通过传递索引来进行动态引用，但我也需要知道使用哪种滚动函数来实现这一点
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
当前回答
您可以使用componentDidUpdate之类的东西
componentDidUpdate() {
var elem = testNode //your ref to the element say testNode in your case;
elem.scrollTop = elem.scrollHeight;
};
其他回答
React 16.8 +，功能组件
const ScrollDemo = () => {
const myRef = useRef(null)
const executeScroll = () => myRef.current.scrollIntoView()
// run this function from an event handler or an effect to execute scroll
return (
<>
<div ref={myRef}>Element to scroll to</div>
<button onClick={executeScroll}> Click to scroll </button>
</>
)
}
点击这里查看StackBlits的完整演示
React 16.3 +，类组件
class ReadyToScroll extends Component {
constructor(props) {
super(props)
this.myRef = React.createRef()
}
render() {
return <div ref={this.myRef}>Element to scroll to</div>
}
executeScroll = () => this.myRef.current.scrollIntoView()
// run this method to execute scrolling.
}
类组件-引用回调
class ReadyToScroll extends Component {
render() {
return <div ref={ (ref) => this.myRef=ref }>Element to scroll to</div>
}
executeScroll = () => this.myRef.scrollIntoView()
// run this method to execute scrolling.
}
不要使用字符串引用。
字符串裁判损害性能，不可组合，并且正在被淘汰(2018年8月)。
字符串引用有一些问题，被认为是遗留的，而且很可能是 在将来的版本中被删除。[官方React文档]
resource1resource2
可选:平滑滚动动画
/* css */
html {
scroll-behavior: smooth;
}
传递ref给一个子对象
我们希望ref附加到一个dom元素，而不是一个react组件。所以当把它传递给子组件时，我们不能给prop ref命名。
const MyComponent = () => {
const myRef = useRef(null)
return <ChildComp refProp={myRef}></ChildComp>
}
然后将ref prop附加到dom元素上。
const ChildComp = (props) => {
return <div ref={props.refProp} />
}
下面是你可以用来解决这个问题的类组件代码片段:
这种方法使用了ref，并且平滑地滚动到目标ref
import React, { Component } from 'react'
export default class Untitled extends Component {
constructor(props) {
super(props)
this.howItWorks = React.createRef()
}
scrollTohowItWorks = () => window.scroll({
top: this.howItWorks.current.offsetTop,
left: 0,
behavior: 'smooth'
});
render() {
return (
<div>
<button onClick={() => this.scrollTohowItWorks()}>How it works</button>
<hr/>
<div className="content" ref={this.howItWorks}>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt placeat magnam accusantium aliquid tenetur aspernatur nobis molestias quam. Magnam libero expedita aspernatur commodi quam provident obcaecati ratione asperiores, exercitationem voluptatum!
</div>
</div>
)
}
}
这对我很有效
this.anyRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
编辑:我想在评论的基础上进行扩展。
const scrollTo = (ref) => {
if (ref && ref.current /* + other conditions */) {
ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
}
<div ref={scrollTo}>Item</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>
以下是我的解决方案:
我在main div里面放了一个隐形的div，使它的位置是绝对的。然后将顶部值设置为-(头高)，并在此div上设置ref。或者你可以用children方法反应该div。
到目前为止，它工作得很好!
<div className="position-relative">
<div style={{position:"absolute", top:"-80px", opacity:0, pointerEvents:'none'}} ref={ref}></div>
