如何实现支持原生滚动的3D效果Carousel组件

要保留你原有的3D视觉效果，同时实现移动端滚动，确实需要结合JavaScript监听滚动状态——纯CSS的scroll-snap无法直接关联其他元素的变换样式。以下是具体实现步骤：

1. 调整HTML结构 #

把轮播项放到可滚动容器中，保留radio指示器用于同步状态：

<body>
  <footer>
    <div class="footer-carousel-container">
      <input
        type="radio"
        name="carousel-slider"
        class="carousel-radio-input"
        id="carousel-input-1"
        checked
      />
      <input
        type="radio"
        name="carousel-slider"
        class="carousel-radio-input"
        id="carousel-input-2"
      />
      <input
        type="radio"
        name="carousel-slider"
        class="carousel-radio-input"
        id="carousel-input-3"
      />
      <!-- 新增可滚动容器 -->
      <div class="carousel-scroll-container">
        <div class="carousel-video-cards">
          <div
            class="carousel-card active"
            id="carousel-video-1"
          >
            <a id="carousel-link-1" class="carousel-link">
              <img
                src="https://placekitten.com/640/360"
                class="carousel-thumbnail"
              />
            </a>
          </div>

          <div
            class="carousel-card"
            id="carousel-video-2"
          >
            <a id="carousel-link-2" class="carousel-link">
              <img
                src="https://placekitten.com/640/360"
                class="carousel-thumbnail"
              />
            </a>
          </div>

          <div
            class="carousel-card"
            id="carousel-video-3"
          >
            <a id="carousel-link-3" class="carousel-link">
              <img
                src="https://placekitten.com/640/360"
                class="carousel-thumbnail"
              />
            </a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</body>

2. 修改CSS样式 #

添加滚动容器的scroll-snap配置，把原radio:checked选择器替换为.active类：

.footer-carousel-container {
  height: 240px;
  width: 640px;
  text-align: center;
  transform-style: preserve-3d;
  overflow: hidden; /* 隐藏容器外内容 */
}

/* 滚动容器核心样式 */
.carousel-scroll-container {
  width: 100%;
  height: 180px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  display: flex;
  justify-content: center;
  align-items: center;
  scrollbar-width: none; /* 隐藏滚动条 */
}

.carousel-scroll-container::-webkit-scrollbar {
  display: none; /* 隐藏webkit滚动条 */
}

.carousel-video-cards {
  display: flex;
  width: fit-content;
}

.carousel-thumbnail {
  height: 164px;
  width: 290px;
  border-radius: 5px;
}

.carousel-card {
  flex-shrink: 0;
  width: 46.5%;
  scroll-snap-align: center; /* 滚动时对齐到中心 */
  transition: transform 0.4s ease, opacity 0.4s ease;
  cursor: pointer;
}

.carousel-link {
  display: block;
}

/* 复用原3D变换逻辑，替换为.active类控制 */
.carousel-card.active ~ .carousel-card:nth-child(2),
.carousel-card:nth-child(3).active ~ .carousel-card:nth-child(1) {
  transform: translatex(50%) scale(0.8);
  opacity: 0.4;
  z-index: 0;
}

.carousel-card.active ~ .carousel-card:nth-child(3),
.carousel-card:nth-child(2).active ~ .carousel-card:nth-child(1) {
  transform: translatex(-50%) scale(0.8);
  opacity: 0.4;
  z-index: 0;
}

.carousel-card.active {
  transform: translatex(0) scale(1);
  opacity: 1;
  z-index: 1;
}

.carousel-card.active img {
  box-shadow: 0px 0px 10px 10px rgb(0 0 0 / 5%);
}

.carousel-radio-input {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background-color: grey;
  padding: 5px;
  margin: 0 3px;
  border-radius: 50%;
  position: relative;
  top: 20px;
  cursor: pointer;
}

.carousel-radio-input:checked {
  background-color: blue;
}

3. 添加JavaScript逻辑 #

监听滚动事件判断当前激活项，同步.active类和radio状态：

const scrollContainer = document.querySelector('.carousel-scroll-container');
const carouselCards = document.querySelectorAll('.carousel-card');
const radioInputs = document.querySelectorAll('.carousel-radio-input');

// 计算并设置当前激活项
function setActiveCard() {
  const containerWidth = scrollContainer.offsetWidth;
  const scrollLeft = scrollContainer.scrollLeft;
  
  carouselCards.forEach((card, index) => {
    const cardCenter = card.offsetLeft + card.offsetWidth / 2;
    const containerCenter = scrollLeft + containerWidth / 2;
    
    // 判断卡片是否处于容器中心区域
    if (Math.abs(cardCenter - containerCenter) < card.offsetWidth / 4) {
      carouselCards.forEach(c => c.classList.remove('active'));
      card.classList.add('active');
      radioInputs[index].checked = true;
    }
  });
}

// 监听滚动事件
scrollContainer.addEventListener('scroll', setActiveCard);

// 点击radio时滚动到对应项
radioInputs.forEach((radio, index) => {
  radio.addEventListener('click', () => {
    carouselCards[index].scrollIntoView({
      behavior: 'smooth',
      inline: 'center'
    });
  });
});

// 初始化激活项
setActiveCard();

核心说明 #

• 用scroll-snap实现滚动自动对齐，保证移动端原生滚动体验
• 通过JS计算滚动位置，确定居中的轮播项，用.active类复用原3D变换样式
• 保留原radio指示器的交互，点击时平滑滚动到对应项，同步状态

这套方案完全保留了你原有的3D视觉效果和过渡动画，同时满足移动端滚动需求。

内容的提问来源于stack exchange，提问作者DishiestAlarm