J'essaie de centrer mon bloc avec Overflow-X-Scroll. Mais cela ne fonctionne qu'après rechargement de la page localement. Mais après le déploiement - ne fonctionne pas du tout. Il n'y a pas d'erreur dans la console. Qu'est-ce que je fais mal?

useEffect( () => {
    document.getElementById("scroller").scrollLeft =
    document.getElementById("scroller").scrollWidth/2 - window.innerWidth/2
  }, [])

Next.js réagit

import React, { useState, useEffect } from "react";

const info = [
  "1-Lorem ipsup lorem ipsup",
  "2-Lorem ipsup lorem ipsup",
 
]

export default function LendersSlider() {
  const[state_1, setState1] = useState("hidden")
  const[state_fake_1, setFake1] = useState("visible")
  const[state_2, setState2] = useState("hidden")
  const[state_fake_2, setFake2] = useState("visible")


  const setState = (index) => {
    if (index == 1) {
      if (state_1 == "visible") {
        setState1("hidden")
        setFake1("visible")
      } else {
        setState1("visible")
        setFake1("hidden")
      }
    } else if (index == 2) {
      if (state_2 == "visible") {
        setState2("hidden")
        setFake2("visible")
      } else {
        setState2("visible")
        setFake2("hidden")
      }
    }
  }

  useEffect( () => {
    document.getElementById("scroller").scrollLeft =
        document.getElementById("scroller").scrollWidth/2 - window.innerWidth/2
  }, [])


  return (
<div className="overflow-x-scroll" id="scroller">
 <div className="min-w-max relative py-24 px-36">...further just a picture of svg...</div>
</div> )
}
1
katuwa 4 mai 2021 à 15:59

2 réponses

Meilleure réponse

Vous devez écouter Fenêtre: Resize Event:

Pour centrer le contenu: (scrollWidth - clientWidth) / 2

useEffect( () => {
    function onResize() {
      document.getElementById("scroller").scrollLeft =(document.getElementById("scroller").scrollWidth - document.getElementById("scroller").clientWidth)/2 
    }
    window.addEventListener("resize", onResize);
    onResize() //--> call it after component is rendered
    return window.removeEventListener("resize", onResize);
  }, []);
2
lissettdm 4 mai 2021 à 15:27

L'USEEFFECT fonctionne sur la matrice de dépendance que vous l'assurez, donc actuellement parce qu'il est vide, il agit comme composantdidmount et ne fonctionne qu'une seule fois. Ce que vous pouvez faire est de définir un auditeur d'événement et de conserver le changement que vous recherchez (comme une largeur de fenêtre) dans l'état et fournissez cet état à la matrice d'utilisation de la dépendance. Donc, dans votre cas quelque chose comme ça:

const [width, setWidth] = useState(window.innerWidth);
const handleWidthChange = () => setWidth(window.innerWidth);

useEffect( () => {
   window.addEventListener("resize", handleWidthChange);
   document.getElementById("scroller").scrollLeft =
   document.getElementById("scroller").scrollWidth/2 - window.innerWidth/2
   return () => window.removeEventListener("resize", handleWidthChange) // cleanup
}, [width])
1
sava128 4 mai 2021 à 14:36