这种右侧空白+横向间隙的问题我碰到过不少，结合你提到的AOS动画库和之前的修复经验，给你几个针对性的解决方案：

快速临时修复（立竿见影） #

如果你的页面不需要横向滚动，直接给body添加横向溢出隐藏，能立刻解决空白问题：

body {
  overflow-x: hidden;
}

针对AOS动画的根源修复 #

既然怀疑和AOS有关，大概率是动画过程中元素超出了视口范围导致的：

• 给动画元素的父容器加溢出限制：找到使用AOS动画的元素，给它们的直接父容器添加overflow: hidden;，这样元素的动画位移就会被限制在父容器内，不会撑出页面空白：

  .aos-element-parent {
    overflow: hidden;
  }
  

• 调整AOS动画配置：如果是滑入类动画（比如fade-left/fade-right），可以在初始化AOS时调整offset参数，缩小元素初始位置的偏移量，避免元素跑到视口外太多：

  AOS.init({
    offset: 100, // 可以根据实际情况调小，比如50
    duration: 600
  });
  

额外排查点 #

还有几个常见的坑也可能导致这个问题，你可以顺便检查下：

• 有没有元素用了width: 100vw？这个属性会包含浏览器滚动条的宽度，当页面有纵向滚动条时，100vw会比body实际宽度宽，直接撑出横向空白，把它改成width: 100%就好。
• 确认全局的box-sizing: border-box有没有被其他样式覆盖，用浏览器开发者工具选中任意元素，检查它的box-sizing属性是不是border-box，如果不是，排查下有没有优先级更高的样式覆盖了全局设置。

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