Chromium浏览器中CSS Scroll Snap子元素hover变换致滚动卡顿问题

问题确认 #

这是Chromium内核浏览器（Chrome、Brave、Edge）的已知兼容性问题，源于scroll-snap机制与CSS transform: scale()的交互冲突——当子元素hover缩放时，浏览器需要重新计算滚动容器的布局和滚动捕捉位置，导致渲染线程阻塞，出现卡顿。Firefox的scroll-snap实现逻辑不同，因此不受影响。

解决方案 #

1. 提前告知浏览器优化变换渲染 #

给hover状态的卡片添加will-change: transform，让浏览器提前为变换操作分配资源，减少实时计算的开销：

.card:hover {
  transform: scale(1.05);
  will-change: transform;
}

2. 避免元素溢出触发额外计算 #

通过调整容器内边距预留缩放空间，同时给卡片设置合适的transform-origin，避免缩放后元素溢出容器触发不必要的滚动布局计算：

.scroll-container {
  scroll-snap-type: x mandatory;
  display: flex;
  overflow-x: auto;
  padding: 1rem 0; /* 预留缩放空间，防止卡片溢出 */
}

.card {
  scroll-snap-align: center;
  width: 300px;
  height: 400px;
  transform-origin: center; /* 确保缩放以中心为基准 */
}

.card:hover {
  transform: scale(1.05);
}

3. 动态禁用hover时的滚动捕捉 #

通过JavaScript在卡片hover时临时关闭容器的scroll-snap功能，鼠标离开后恢复，彻底避免两者的冲突：

const scrollContainer = document.querySelector('.scroll-container');
const cards = document.querySelectorAll('.card');

cards.forEach(card => {
  card.addEventListener('mouseenter', () => {
    scrollContainer.style.scrollSnapType = 'none';
  });
  card.addEventListener('mouseleave', () => {
    scrollContainer.style.scrollSnapType = 'x mandatory';
  });
});

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