轮播会导致屏幕在幻灯片更改时移至页面顶部 [英] Carousel causes screen to move to top of page on slide change

问题描述

---

附加(如果有用)

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

  useEffect(()=> {const slides = Array.from(document.getElementsByClassName('slide'))const点= Array.from(document.getElementsByClassName('dot'))slides.forEach((slide，slideIdx)=> {if(slideIdx === index){slide.className =幻灯片滑入淡入"；dots [slideIdx] .className ="dot activeDot"返回}否则，如果(slideIdx === index + 1 || slideIdx === 0&& index === squares.length-1){slide.className =三重?幻灯片Slide-du淡入":看不见幻灯片"；}否则，如果(slideIdx ===索引+ 2 ||(slideIdx === 0&&index; === squares.length-2)||(slideIdx === 1&& index === squares.length-1)){slide.className =三重?幻灯片Slide-TWA淡入":看不见幻灯片"；}别的{slide.className =幻灯片不可见"}点[slideIdx] .className =点"})}， [指数]) 

解决方案

可能引起问题的原因是我在 useEffect 功能，然后将每张幻灯片设置为位于网格中的某个位置，或者使该幻灯片不可见.我更改了代码，以便以状态记录了一系列幻灯片

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

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

  useEffect(()=> {如果(三倍){if(index === squares.length-1){setSlides([squares [index]].concat(squares.slice(0,2)))}否则if(index === squares.length-2){setSlides(squares.slice(index，index + 2).concat([squares [0]]))}别的{setSlides(squares.slice(index，index + 3))}}别的{setSlides([squares [index]])}}， [指数]) 

Minimum Reproducible Example on Github (The images don't show in this MRE, but that's ok and doesn't matter because the problem I'm wondering about has nothing to do with that)

---

Problem: Every time the slide index changes, the screen scrolls to the top of the page. It happens automatically.

This happens when

• incrementing the slide number by 1
• when decrementing the slide number from 3->1 or from 2->0

But does not happen when

• incrementing the slide number from slide 2 to slide 3 (slides numbered 0-3).
• decrementing the slide number by 1.

Note: When slide 3 is the active slide that means that slide 3 is the one on top, and slide 1 and 2 are the ones on the bottom.

You can see what I'm talking about in this gif below.

• Note: (The scrolling down that you see in the gif is done manually.)

---

Extra (In case it's useful)

I think that this may be caused by my useEffect function, which loops through each slide and assigns them to be visible or invisible and when they lay in the grid layout. When slide 4 is active, that means that slide 1 and slide 2 would be assigned to be the bottom slides first, slide 3 would then be assigned to be invisible and slide 4 would then be assigned to be the top slide.

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

解决方案

What may have cause the problem was that I was manipulating the DOM directly by using document.getElementsByClassName within my useEffect function, and then was setting each slide to be at a certain place in the grid, or making the slide invisible. I changed my code so that an array of slides was recorded in state

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

I then updated the state of slides within the useEffect function, instead of manipulating their 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])

这篇关于轮播会导致屏幕在幻灯片更改时移至页面顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！