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

Question

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

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

这发生在

幻灯片编号增加 1
当幻灯片编号从 3->1 或从 2->0 递减时

但在

时不会发生

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

注意:当slide 3为活动幻灯片时，表示slide 3在最上面，slide 1和slide 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])

Answer 1

可能导致问题的原因是我在我的 useEffect 函数中使用 document.getElementsByClassName 直接操作 DOM，然后将每张幻灯片设置为某个特定位置放置在网格中，或使幻灯片不可见。我更改了我的代码，以便在 state

中记录一组幻灯片

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

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

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

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

Carousel causes screen to move to top of page on slide change

javascript

carousel

reactjs

gatsby

gatsby-image