如何滚动到一个元素？

小编典典

如何滚动到一个元素？

javascript

我有一个聊天小部件，每次向上滚动时，它都会拉出一系列消息。我现在面临的问题是，在加载消息时，滑块保持固定在顶部，我希望它专注于上一个数组中的最后一个索引元素。我发现可以通过传递索引来创建动态引用，但是我还需要知道要使用哪种滚动功能才能实现这一点

 handleScrollToElement(event) {
    const tesNode = ReactDOM.findDOMNode(this.refs.test)
    if (some_logic){
      //scroll to testNode      
    }
  }

  render() {

    return (
      <div>
        <div ref="test"></div>
      </div>)
  }

阅读 312

2020-05-01

共1个答案

小编典典

React 16.8 +，功能组件

const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop)   
// General scroll to element function

const ScrollDemo = () => {

   const myRef = useRef(null)
   const executeScroll = () => scrollToRef(myRef)

   return (
      <> 
         <div ref={myRef}>I wanna be seen</div> 
         <button onClick={executeScroll}> Click to scroll </button> 
      </>
   )
}

React 16.3 +，Class组件

class ReadyToScroll extends Component {

    constructor(props) {
        super(props)
        this.myRef = React.createRef()  
    }

    render() {
        return <div ref={this.myRef}></div> 
    }

    scrollToMyRef = () => window.scrollTo(0, this.myRef.current.offsetTop)   
    // run this method to execute scrolling.

}

类组件-Ref回调

class ReadyToScroll extends Component {
    myRef=null
    // Optional

    render() {
        return <div ref={ (ref) => this.myRef=ref }></div>
    }

    scrollToMyRef = () => window.scrollTo(0, this.myRef.offsetTop)
    // run this method to execute scrolling. 
}

不要使用字符串引用。

字符串引用会损害性能，不可组合且即将淘汰（2018年8月）。

字符串引用存在一些问题，被认为是旧问题，并且很可能在将来的发行版之一中删除。[官方React文档]

可选：平滑滚动动画

/* 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} />
}

2020-05-01