基于ReactJS实现选图抽奖轮播组件的需求与问题

一、确保抽奖停止时目标图片居中 #

1. 计算精准终止偏移量 #

根据轮播卡片的宽度、间距，结合容器中心位置，计算目标卡片需要滚动的最终位置，保证其中心与高亮区域中心重合：

// 配置参数
const cardWidth = 120; // 单张卡片宽度
const gap = 20; // 卡片间距
const targetIndex = 3; // 抽中目标的索引

// 计算容器中心偏移量（让卡片中心对齐容器中心）
const container = document.querySelector('.carousel-container');
const centerOffset = (container.clientWidth - cardWidth) / 2;
// 计算目标卡片的基础偏移量
const baseOffset = (cardWidth + gap) * targetIndex;
// 最终滚动位置
const finalPosition = baseOffset - centerOffset;

// 平滑滚动到目标位置
container.scrollTo({
  left: finalPosition,
  behavior: 'smooth'
});

2. 修正3D透视位置偏差 #

如果使用3D透视布局，需额外校准中心卡片的视觉位置，抵消透视带来的偏移：

.carousel-item.center {
  transform: translateZ(60px) translateX(calc(-50% + 5px));
  /* 5px为透视偏移校准值，根据实际布局调整 */
}

二、为经过中心的图片添加高亮发光效果 #

1. 滚动时实时检测中心区域卡片 #

监听滚动事件，计算卡片与容器中心的距离，当进入中心区域时添加高亮类：

const container = document.querySelector('.carousel-container');
const items = document.querySelectorAll('.carousel-item');

// 节流函数优化滚动事件性能
const throttle = (func, delay) => {
  let lastTrigger = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTrigger >= delay) {
      lastTrigger = now;
      func(...args);
    }
  };
};

container.addEventListener('scroll', throttle(() => {
  const containerCenter = container.scrollLeft + container.clientWidth / 2;
  
  items.forEach(item => {
    const rect = item.getBoundingClientRect();
    const itemCenter = rect.left + rect.width / 2;
    // 当卡片中心与容器中心的距离小于卡片半宽时，判定为进入中心区域
    const isInCenter = Math.abs(containerCenter - itemCenter) < rect.width / 2;
    
    item.classList.toggle('highlight', isInCenter);
  });
}, 60));

2. 实现发光高亮样式 #

通过阴影和缩放动画强化高亮效果，配合过渡让视觉更流畅：

.carousel-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-item.highlight {
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
  filter: drop-shadow(0 0 18px #ffd700);
  transform: scale(1.12);
  z-index: 10;
}

三、整合优化要点 #

• 抽奖触发时，先计算目标位置再启动滚动动画，确保停止位置精准
• 若使用自定义滚动动画（而非原生scrollTo），需在动画帧回调中同步执行高亮检测逻辑
• 针对移动端触摸滚动，需添加touchmove事件监听，保证高亮效果同步触发

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