嵌入页面CSS适配问题：如何避免垂直滚动条且不破坏嵌入页背景

你提出的需求可以通过纯CSS代码实现，不会破坏原有的body背景样式，具体方案如下：

方案1：完全禁止垂直滚动（无滚动能力） #

直接在嵌入页的CSS中添加以下代码，原有body的背景相关属性不需要修改：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: hidden;
  box-sizing: border-box;
}
/* 全局统一盒模型，避免边框、内边距撑高容器触发隐性溢出 */
* {
  box-sizing: inherit;
}

如果是通过iframe嵌入的场景，父页面的iframe标签也要添加对应样式：

iframe {
  border: none;
  display: block;
  width: 100%;
  /* 高度设置为和嵌入页内容高度匹配即可，也可以用100vh占满父容器视口 */
  height: 100vh;
  overflow: hidden;
}

方案2：隐藏滚动条但保留滚动能力 #

如果需要页面可以正常滚动，只是不显示滚动条，使用以下多浏览器兼容代码：

/* Webkit内核浏览器（Chrome、Safari、新版Edge） */
::-webkit-scrollbar {
  display: none;
}
/* Firefox */
html {
  scrollbar-width: none;
}
/* IE、旧版Edge */
html {
  -ms-overflow-style: none;
}

注意事项 #

• 不要仅给body标签设置溢出隐藏，部分浏览器中html根节点的默认溢出规则仍会触发滚动条
• 以上所有代码均不会修改或覆盖body的背景样式，原有背景图、背景色配置可以完全保留

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