实现视频播放暂停卡片滚动动画及解决最后卡片显示不全问题

一、实现视频播放时暂停所有卡片滚动动画 #

核心思路 #

监听所有video元素的play/pause/ended事件，给卡片滚动容器添加/移除控制类，通过CSS的animation-play-state属性实现全局滚动动画暂停/恢复。不管是原卡片内的视频还是弹窗中的视频，都能触发这个逻辑。

代码修改 #

1. CSS 新增控制类

/* 替换为你的卡片滚动容器类名 */
.card-scroller.paused {
  animation-play-state: paused !important;
}

/* 示例滚动动画（根据你的实际动画调整） */
@keyframes card-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% + 100vw));
  }
}

2. JavaScript 事件监听（适配动态弹窗）

如果弹窗是点击后动态生成的，用事件委托更稳妥：

const cardScroller = document.querySelector('.card-scroller');

// 监听全局视频播放事件
document.addEventListener('play', e => {
  if (e.target.tagName === 'VIDEO') {
    cardScroller.classList.add('paused');
  }
}, true);

// 监听视频暂停/结束事件，恢复动画
document.addEventListener('pause', e => {
  if (e.target.tagName === 'VIDEO') {
    cardScroller.classList.remove('paused');
  }
}, true);

document.addEventListener('ended', e => {
  if (e.target.tagName === 'VIDEO') {
    cardScroller.classList.remove('paused');
  }
}, true);

如果视频都是静态渲染的，也可以直接获取所有视频元素绑定事件：

const allVideos = document.querySelectorAll('video');
const cardScroller = document.querySelector('.card-scroller');

allVideos.forEach(video => {
  video.addEventListener('play', () => cardScroller.classList.add('paused'));
  video.addEventListener('pause', () => cardScroller.classList.remove('paused'));
  video.addEventListener('ended', () => cardScroller.classList.remove('paused'));
});

二、最后一张卡片显示一半的原因及修复 #

常见原因 #

1. 滚动动画距离计算错误：如果用transform: translateX(-100%)，会把整个卡片列表向左移动自身宽度的100%，但容器可视区域还有剩余，导致最后一张卡片被截断。
2. 容器/卡片尺寸配置问题：卡片总宽度（含间距、边距）超出容器可滚动范围；或者容器overflow-x设置错误，卡片未设置固定宽度导致收缩。
3. Flex布局属性缺失：卡片容器用flex-wrap: nowrap但未给卡片设置flex: 0 0 auto，导致卡片被挤压变形。

修复方案 #

1. 修正滚动动画关键帧

把动画终点调整为calc(-100% + 容器可视宽度)，确保最后一张卡片完全显示：

@keyframes card-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 容器是全屏就用100vw，否则替换为容器固定宽度，比如800px */
    transform: translateX(calc(-100% + 100vw));
  }
}

2. 调整容器与卡片的样式配置

.card-scroller {
  display: flex;
  gap: 16px; /* 你的卡片间距 */
  overflow-x: hidden; /* 动画滚动用hidden，手动滚动用auto */
  width: 100%;
}

.card {
  flex: 0 0 auto; /* 固定宽度，禁止收缩 */
  width: 300px; /* 你的卡片宽度 */
}

3. 动态计算滚动距离（适配动态卡片数量）

如果卡片数量不固定，用JS动态计算总宽度并生成动画：

const cardScroller = document.querySelector('.card-scroller');
const totalWidth = cardScroller.scrollWidth;
const containerWidth = cardScroller.clientWidth;
const scrollDistance = totalWidth - containerWidth;

// 插入动态样式
const style = document.createElement('style');
style.textContent = `
  @keyframes card-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-${scrollDistance}px); }
  }
`;
document.head.appendChild(style);

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