旋转木马只能工作一次

Question

我使用"element.scrollIntoView({inline:center，behavior: smooth})“为一个旋转木马组件编写了代码。但是，它不是通过旋转木马水平导航，它只在第一次工作，中心垂直代替。

奇怪的是，如果我走到页面的顶部，按下左右键，它会向下滚动，水平滚动，然后它又开始工作了.我不明白发生了什么事。

TSX文件：

import React, { useEffect, useState } from 'react'
import './styles.css'

export function Carousel() {

  const [currentItem, setCurrentItem] = useState(0)

  function clickArrowLeft() {
    const items = document.querySelectorAll('.items')
    const maxItems = items.length
    
    if(currentItem == 0) {
      setCurrentItem(maxItems - 1)
    }else {
    setCurrentItem(currentItem - 1)
  }
  console.log(currentItem)
}
function clickArrowRight() {
  const items = document.querySelectorAll('.items')
  const maxItems = items.length
  
  if(currentItem == maxItems - 1) {
    setCurrentItem(0)
  }else{
    setCurrentItem(currentItem + 1)
    }
    console.log(currentItem)
  }

  useEffect(()=>{
    
      const items = document.querySelectorAll('.items')
      items.forEach(item => {
        item.classList.remove('current-item')
      })
      items[currentItem].scrollIntoView({
        inline: 'center',
        behavior: 'smooth'
      })
      items[currentItem].classList.add('current-item')
    
  }, [currentItem])
  
  return (
    <div className='Carousel-container'>
      <button onClick={clickArrowLeft} className='control'>{'<'}</button>
        <div id='contain-carousel' className='wrapper'>
            <ul>
                <img className='items current-item' src='https://picsum.photos/seed/1/800/400' />
                <img className='items' src='https://picsum.photos/seed/2/800/400' />
                <img className='items' src='https://picsum.photos/seed/3/800/400' />
                <img className='items' src='https://picsum.photos/seed/4/800/400' />
                <img className='items' src='https://picsum.photos/seed/5/800/400' />
                <img className='items' src='https://picsum.photos/seed/6/800/400' />
                <img className='items' src='https://picsum.photos/seed/7/800/400' />
                <img className='items' src='https://picsum.photos/seed/8/800/400' />
                <img className='items' src='https://picsum.photos/seed/9/800/400' />
                <img className='items' src='https://picsum.photos/seed/10/800/400' />
            </ul>
        </div>
      <button onClick={clickArrowRight} className='control'>{'>'}</button>
    </div>
  )
}

CSS文件：

.Carousel-container{
    @apply
    flex
    p-4
    m-auto
    gap-2
}

.wrapper{
    @apply
    overflow-x-auto
}

ul {
    @apply
    flex
    flex-nowrap
    gap-2
}

.items{
    @apply
    opacity-10
}

.current-item {
    @apply
    opacity-100
}

Answer 1

scrollIntoView垂直滚动，而inline: 'center'应该处理水平滚动，所以这里并不奇怪。

在看到CSS文件之前，我不能告诉您更多。

您可以通过将display: none设置为所有没有current-item类的项来实现您想要的结果吗？这样您就根本不需要使用scrollIntoView了。

另外，您不应该创建useEffect来检测currentItem更改的时间，而应该将其作为一个单独的函数，并从clickArrowRight和clickArrowLeft调用它。这样，您将避免在组件第一次加载时调用它(除非您希望这样做)。