framer-motion执行滑入动画时页面出现滚动条该如何解决？

滚动条出现的核心原因是浏览器默认的溢出渲染逻辑：你给元素设置x: '-100vw'的初始状态时，元素通过transform偏移到了视口左边界外，浏览器会将这部分超出视口的内容识别为可访问的滚动区域，自动弹出横向滚动条。
教程里没有出现这个问题，基本都是作者提前给全局或者父容器加了溢出隐藏的基础样式，没有特意在动画部分提这个配置，不是framer-motion本身的功能bug。滑入动效本身是非常成熟的实现，出现滚动条只是缺少了必要的样式配置而已。

• 最通用的解决方式：给全局body或者应用根节点添加横向溢出隐藏样式，直接裁掉视口外的横向内容，从根源上避免横向滚动条触发，这个配置不会影响页面正常的纵向滚动功能：

body {
  overflow-x: hidden;
}

• 不想修改全局样式的话，可以给滑入元素的直接父容器添加overflow: hidden属性，同时调整初始偏移值：没必要用-100vw这么大的偏移量，改成x: '-100%'即可，这个值是基于元素自身宽度计算的，能把元素完全藏在父容器左侧边界外，偏移范围不会超出父容器的裁切区域，自然不会撑出全局滚动条。
• 如果做的是首屏整组元素的入场动画，可以在动画执行期间临时给根元素加overflow: hidden锁滚动，监听动画的onAnimationComplete回调再移除这个属性，不过这种方式实现成本比前两种高，非特殊场景不推荐。

• 如果是滚动到视口位置才触发的滑入效果，直接用framer-motion自带的whileInView属性即可，不需要把元素偏移到视口外，只需要设置几十像素的初始偏移就能做出自然的滑入感，基本不会触发滚动条问题，示例配置：

<motion.div
  initial={{ opacity: 0, x: -30 }}
  whileInView={{ opacity: 1, x: 0 }}
  transition={{ duration: 0.3 }}
  viewport={{ once: true }}
/>

• 也可以直接用原生CSS的transform+transition实现滑入效果，逻辑和framer-motion完全一致，只要记得给对应父容器加溢出裁切即可，滚动条问题和你用什么动画库没有关系，本质是浏览器的默认渲染规则决定的。

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