在显示 PDF 时隐藏水平滚动条<iframe>

Question

我找到了一个很好的解决方案，可以使用 Swiper.js 在我的网站上嵌入 PDF 库。但是，我有几个问题：我不喜欢 Google PDF 预览的深灰色，并且我想隐藏水平滚动条，该滚动条当前将内容与左上角对齐。

有没有办法删除滚动条而不消除滚动的可能性？

附注结果在移动设备上看起来很完美，居中，没有滚动条，左侧和右侧有额外的深灰色。

我尝试在CSS中使用scrolling =“no”并应用overflow：隐藏。

我还尝试使用 iframe::-webkit-scrollbar 和 display:none

Answer 1

要隐藏滚动条同时保持滚动功能，请添加以下内容：

    .pdf-wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden; /* Hide scrollbar but maintain scroll functionality */
    }

    .pdf-frame {
      width: 100%;
      height: 100%;
      border: none;
      position: absolute;
      top: 0;
      left: 0;
      /* Hide scrollbar while maintaining functionality */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }

    /* Hide WebKit scrollbar while maintaining functionality for Chrome and Safari */
    .pdf-frame::-webkit-scrollbar {
      display: none;
    }

您可以在这里阅读更多相关信息：

为什么存在 -ms-overflow-style？

现在，要修复深灰色背景，您需要使用容器和伪元素将背景设置为白色，并使用 Flexbox 添加适当的居中：

https://www.w3schools.com/css/css3_flexbox。 ASP

另一个选项，您可以根据需要修改白色背景颜色以匹配您网站的主题。

另外，不要忘记将

#toolbar=0&navpanes=0

 添加到 PDF URL 以隐藏默认的 PDF 查看器控件

在浏览器中显示 PDF 时可以隐藏 Adobe 浮动工具栏吗？