如何同时滑动切换两个100%宽度元素并消除横向滚动条？

核心问题是动画过程中，离开的元素滑到视口左侧外、进入的初始元素在视口右侧外，但它们仍处于文档流中，导致页面总宽度超出视口，触发横向滚动条。以下是几个靠谱的修复方案：

方法一：给容器加溢出隐藏（最直接） #

找到承载过渡元素的外层容器，添加以下样式：

.carousel-wrap {
  width: 100vw;
  overflow: hidden;
  position: relative;
}

将所有过渡生成的元素放入这个容器，容器会自动裁剪掉超出视口的部分，横向滚动条直接消失。

方法二：优化过渡配置，让元素脱离文档流 #

你当前过渡配置里leave阶段的width: 0%其实没必要，反而可能引发布局抖动。修改配置并给元素添加绝对定位，让它们脱离文档流，动画时不会撑宽页面：

const transitions = useTransition(items, {
  from: {
    opacity: 0,
    transform: `translateX(100%)`,
    position: 'absolute',
    width: '100%'
  },
  enter: {
    opacity: 1,
    transform: "translateX(0%)"
  },
  leave: {
    opacity: 0,
    transform: "translateX(-100%)"
  }
});

同时给每个过渡元素的根节点加上top: 0; left: 0;，确保它们在容器左上角对齐，避免错位。

方法三：全局兜底（应急用，不推荐） #

如果前两种方法没解决问题，可直接给body添加横向溢出隐藏：

body {
  overflow-x: hidden;
}

注意这个操作会影响整个页面的横向滚动，优先用前两种针对性方案。

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