网页异常横向滚动问题：translateX入场动画导致元素溢出排查

问题原因 #

你遇到的非预期横向滚动由两方面可能的原因导致：

1. 入场动画的初始偏移：所有带.loading类的元素初始状态设置了正负值的translateX偏移，会让元素临时跑到视口水平可视范围外，浏览器计算页面整体宽度时会纳入这部分超出区域，进而触发横向滚动条。
2. 盒模型溢出：头部的logo、汉堡菜单添加内边距后，如果没有全局box-sizing: border-box规则，内边距会额外撑大元素宽度，超出视口范围。

修复方案 #

方案1（优先选择，改造成本最低） #

给页面根节点或者动画元素的共同父容器添加overflow-x: hidden样式，直接裁剪水平方向超出视口的内容，完全不会影响现有动画的播放效果：

/* 加在body或者外层页面容器上即可 */
body {
  overflow-x: hidden;
}

方案2（全局盒模型规范化） #

添加全局盒模型规则，避免内边距、边框撑大元素宽度导致的溢出问题，属于项目通用最佳实践：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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