轮播会导致屏幕在幻灯片更改时移至页面顶部

问题描述

Minimum Reproducible Example on Github （图像未在此MRE中显示，但这没关系，也没有关系，因为我想知道的问题与此无关）

---

问题：每次幻灯片索引更改时，屏幕都会滚动到页面顶部。它会自动发生。

这种情况发生在

• 将幻灯片编号增加1
• 将幻灯片编号从3-> 1或2-> 0减小

但是什么时候不会发生

• 将幻灯片编号从幻灯片2递增到幻灯片3（幻灯片编号0-3）。
• 将幻灯片编号减少1。

注意：当幻灯片3是活动幻灯片时，这意味着幻灯片3是顶部的幻灯片，幻灯片1和2是底部的幻灯片。

您可以在下面的此gif中查看我在说什么。

• 注意：（您在gif中看到的向下滚动是手动完成的。）

---

附加（如果有用）

我认为这可能是由我的useEffect函数引起的，该函数循环遍历每张幻灯片，并将它们分配为可见或不可见以及它们位于网格布局中。当幻灯片4处于活动状态时，这意味着首先将幻灯片1和幻灯片2分配为底部幻灯片，然后将幻灯片3分配为不可见，然后将幻灯片4分配为顶部幻灯片。

  useEffect(() => {

    const slides = Array.from(document.getElementsByClassName('slide'))
    const dots = Array.from(document.getElementsByClassName('dot'))

    slides.forEach((slide,slideIdx) => {
      if(slideIdx === index){
        slide.className = "slide slide-un fade-in"
        dots[slideIdx].className = "dot activeDot"
        return
      } else if (slideIdx === index + 1 || slideIdx === 0 && index === squares.length - 1){
        slide.className = triple ? "slide slide-du fade-in" : "slide invisible"
      }else if (
        slideIdx === index + 2 || 
        (slideIdx === 0 && index === squares.length - 2) || 
        (slideIdx === 1 && index === squares.length - 1)
      ){
        slide.className = triple ? "slide slide-twa fade-in" : "slide invisible"
      }else{
        slide.className = "slide invisible"
      }
      dots[slideIdx].className = "dot"
    })

  },[index])

解决方法

可能引起问题的原因是我在document.getElementsByClassName函数中使用useEffect直接操作DOM，然后将每张幻灯片设置在网格中的某个位置，或者使幻灯片不可见。我更改了代码，以便以状态记录了一系列幻灯片

const [slides,setSlides] = triple ? useState(squares.slice(0,3)) : useState([squares[0]])

然后我在useEffect函数中更新了幻灯片的状态，而不是操纵它们的className

  useEffect(() => {
    if (triple){
      if(index === squares.length - 1){
        setSlides([squares[index]].concat(squares.slice(0,2)))
      }else if(index === squares.length - 2){
        setSlides(squares.slice(index,index+2).concat([squares[0]]))
      }else{
        setSlides(squares.slice(index,index+3))
      }
    }else{
      setSlides([squares[index]])
    }
  },[index])