web-dev-qa-db-fra.com

Obtenir la position de défilement avec Reactjs

J'utilise reactjs et je veux gérer le défilement avec l'événement click.

Tout d'abord, j'ai rendu la liste des postes avec componentDidMount.

Deuxièmement, par click event sur chaque message de la liste, il affichera les détails du message et fera défiler vers le haut (car je mets le détail du message en haut de la page).

Troisièmement, en cliquant sur "close button" dans le détail du message, la liste précédente sera renvoyée, mais je souhaite que le site Web défile exactement jusqu'à la position du message cliqué.

J'utilise comme ça:

Cliquez sur l'événement pour afficher le détail de l'article:

inSingle = (post, e) => {
   this.setState({
        post: post,
        theposition: //How to get it here?
   });
   window.scrollTo(0, 0);
}

Je veux obtenir l'état de theposition alors je peux faire défiler exactement à la position du message cliqué par 'Close event'.

javascriptreactjs
12
Hai Tien

Cela devrait fonctionner:

this.setState({
    post: post,
    theposition: window.pageYOffset
});
9
sbr_amd

Vous pouvez utiliser event listener dans react comme vous le ferez dans un autre framework ou une bibliothèque js.

componentDidMount() {
  window.addEventListener('scroll', this.listenToScroll)
}

componentWillUnmount() {
  window.removeEventListener('scroll', this.listenToScroll)
}

listenToScroll = () => {
  const winScroll =
    document.body.scrollTop || document.documentElement.scrollTop

  const height =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight

  const scrolled = winScroll / height

  this.setState({
    theposition: scrolled,
  })
}
22
EQuimper

Comme ça:

theposition: e.y // or, e.pageY

Ou,

theposition: e.clientY - e.currentTarget.getBoundingClientRect().top
1
Bhojendra Rauniyar

pour obtenir la position de défilement actuelle, vous pouvez utiliser

montant de défilement horizontal window.pageXOffset

montant de défilement vertical window.pageYOffset

1
Pavittar Singh