如何将React开发的Safari移动端网页下拉露出的背景改为黑色而非白色

你看到的白色是iOS Safari滚动回弹（橡皮筋效果）露出的页面根节点默认背景，可通过以下方式修改为黑色：

• 全局根标签设置黑色背景，添加如下CSS代码：

html, body {
  margin: 0;
  padding: 0;
  background-color: #000;
  /* 不需要全局滚动回弹效果可加下一行配置 */
  overscroll-behavior-y: none;
}

• 同步配置React应用根容器属性，避免根容器高度不足露出底层背景：

/* 对应项目中React挂载的根节点，常规项目取值为#root */
#root {
  min-height: 100vh;
  background-color: #000;
}

如果你的页面滚动为内部容器触发的局部滚动，可给对应滚动容器添加如下规则，避免触发全局回弹露出默认背景：

.your-scroll-container {
  overscroll-behavior: contain;
}

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