如何隐藏<iframe>中PDF的水平滚动条并优化Google PDF预览样式？

一、调整Google PDF预览的深灰色样式 #

Google Docs Viewer支持URL参数优化显示效果，配合容器样式可消除深灰背景：

• 在PDF嵌入URL中追加参数：&embedded=true&toolbar=0&view=FitH
  • embedded=true：启用极简嵌入模式，弱化默认界面样式
  • toolbar=0：隐藏顶部工具栏，减少多余元素干扰
  • view=FitH：让PDF内容水平适配容器宽度，避免左右留白或深灰区域
• 用白色背景容器包裹iframe，覆盖默认深灰底色：

.pdf-container {
  background: #ffffff;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 600px; /* 按需设置高度 */
}
.pdf-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

二、隐藏iframe水平滚动条但保留滚动功能 #

因iframe加载跨域内容（Google预览页），父页面无法直接控制内部滚动条样式，可通过容器裁剪实现需求：

• 让iframe宽度略大于容器，同时用容器的overflow:hidden隐藏滚动条，再通过位移让内容居中：

.pdf-container {
  overflow: hidden;
  /* 保留其他原有样式 */
}
.pdf-container iframe {
  width: 105%; /* 比容器宽5%，可根据实际情况微调 */
  height: 100%;
  border: none;
  transform: translateX(-2.5%); /* 抵消宽度超出部分，让内容居中 */
}

设置后，水平滚动条会被容器裁剪隐藏，但PDF内容仍可通过鼠标滚轮、触摸滑动正常滚动。

三、Swiper集成适配优化 #

确保Swiper的slide容器与PDF容器布局匹配，避免错位：

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

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