页面右侧滚动出现白屏问题求助：如何消除该异常？

• 先给全局容器添加横向溢出隐藏，避免内容超出视口：
  在CSS中添加：

  html, body {
    overflow-x: hidden;
    width: 100%;
  }
  * {
    box-sizing: border-box;
  }
  

  box-sizing: border-box能确保所有元素的padding和border都包含在自身宽度内，不会因为额外内边距导致宽度溢出。

• 排查AOS库的影响：
  尝试调整AOS初始化参数，减小offset值避免元素被过度偏移到视口外：

  AOS.init({
    offset: 80, // 根据页面实际情况调整，默认120可能偏大
    once: true, // 动画仅触发一次，减少布局重绘
    disable: 'mobile' // 移动端禁用AOS，避免小屏幕布局异常
  });
  

  若调整后问题仍存在，可临时注释AOS初始化代码，验证是否是AOS导致的元素偏移。

• 检查单个元素的宽度设置：
  查看页面中是否有元素使用width: 100vw，该单位会包含滚动条宽度，在有纵向滚动条的页面会导致元素超出视口，建议替换为width: 100%。同时检查是否有元素的左右margin/padding设置过大，导致整体宽度超出视口范围。

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