Comment faire défiler un élément ?

Question

J'ai un widget de chat qui fait apparaître une série de messages chaque fois que je fais défiler la page. Le problème que je rencontre actuellement est que le curseur reste fixe en haut lorsque les messages sont chargés. Je veux qu'il se concentre sur le dernier élément de l'index du tableau précédent. J'ai compris que je pouvais créer des références dynamiques en passant l'index, mais j'aurais également besoin de savoir quel type de fonction de défilement utiliser pour y parvenir

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

  render() {

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

Answer 1

React 16.8 +, Composant fonctionnel

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

Cliquez ici pour une démo complète sur StackBlits

React 16.3 +, Composant de classe

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. 
}

Composant de classe - Ref callback

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. 
}

---

N'utilisez pas d'arbitres de cordes.

Les références de chaîne nuisent aux performances, ne sont pas composables et sont en voie de disparition (août 2018).

Les références de chaîne ont quelques problèmes, sont considérées comme un héritage et sont susceptibles d'être supprimées dans l'un ou l'autre des cas. être supprimées dans l'une des futures versions. Documentation officielle de React]

ressource1 ressources2

Facultatif : Animation de défilement lisse

/* css */
html {
    scroll-behavior: smooth;
}

Passer la référence à un enfant

Nous voulons que la référence soit attachée à un élément dom, et non à un composant react. Ainsi, lorsque nous le passons à un composant enfant, nous ne pouvons pas nommer le prop ref.

const MyComponent = () => {
    const myRef = useRef(null)
    return <ChildComp refProp={myRef}></ChildComp>
} 

Attachez ensuite la ref prop à un élément dom.

const ChildComp = (props) => {
    return <div ref={props.refProp} />
}

Answer 2

cela a fonctionné pour moi

this.anyRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })

EDIT : Je voulais développer ce point sur la base des commentaires.

const scrollTo = (ref) => {
  if (ref /* + other conditions */) {
    ref.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}

<div ref={scrollTo}>Item</div>

Answer 3

Trouvez simplement la position supérieure de l'élément que vous avez déjà déterminé. https://www.w3schools.com/Jsref/prop_element_offsettop.asp puis faire défiler jusqu'à cette position via scrollTo méthode https://www.w3schools.com/Jsref/met_win_scrollto.asp

Quelque chose comme ceci devrait fonctionner :

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>)
}

UPDATE :

depuis React v16.3 le site React.createRef() est préféré

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>)
}

Answer 4

L'utilisation de findDOMNode va être dépréciée à terme.

La méthode préférée est d'utiliser des références de rappel.

github eslint

Answer 5

Vous pouvez également utiliser scrollIntoView pour faire défiler un élément donné.

handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
 if (some_logic){
  tesNode.scrollIntoView();
  }
 }

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