如何修改<embed>标签及内嵌PDF的滚动条样式？

你遇到的embed::-webkit-scrollbar这类CSS伪类无效的核心原因是：嵌入的PDF由浏览器自带的PDF渲染引擎（比如Chrome的PDFium）独立处理，里面的滚动条属于引擎内部的原生组件，不属于当前页面的DOM树范畴，外部CSS无法穿透到这个独立的渲染上下文里。

下面给几个可行的解决思路：

1. 使用PDF.js自行渲染PDF（最推荐） #

放弃直接用embed/iframe嵌入，改用PDF.js库来渲染PDF内容。这样PDF会被转换成页面中的普通DOM元素，你就能完全用CSS控制滚动条样式。

简单实现步骤：

• 引入PDF.js的脚本与基础样式
• 初始化PDF加载器，指定目标PDF文件路径
• 将PDF的每一页渲染到页面容器中
• 给包裹容器添加自定义滚动条样式，示例代码：

.pdf-container::-webkit-scrollbar {
  width: 8px;
}
.pdf-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.pdf-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
.pdf-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

优点：完全控制样式与交互，保留PDF的文本选择等原生功能；缺点：需要编写额外JS代码，大体积PDF需做加载性能优化。

2. 隐藏内部滚动条，用外部容器模拟滚动 #

如果不想替换PDF渲染方式，可以用外层容器包裹embed/iframe，隐藏内部滚动条，再用外层容器的滚动条替代，同时用JS同步滚动位置。

实现示例：

<div class="pdf-wrapper">
  <embed src="xxx.pdf" class="pdf-embed">
</div>

.pdf-wrapper {
  width: 100%;
  height: 600px;
  overflow: auto;
}
/* 自定义外层滚动条样式 */
.pdf-wrapper::-webkit-scrollbar {
  width: 10px;
}
.pdf-wrapper::-webkit-scrollbar-thumb {
  background: #2c3e50;
  border-radius: 5px;
}
.pdf-embed {
  width: calc(100% + 10px); /* 抵消外层滚动条宽度，避免横向滚动 */
  height: 100%;
  overflow: hidden; /* 隐藏内部滚动条 */
  border: none;
}

添加JS同步滚动：

const wrapper = document.querySelector('.pdf-wrapper');
const embed = document.querySelector('.pdf-embed');

// 外层滚动时同步到embed
wrapper.addEventListener('scroll', () => {
  embed.scrollTop = wrapper.scrollTop;
});

// 处理用户直接在embed上滚动的情况
embed.addEventListener('scroll', () => {
  wrapper.scrollTop = embed.scrollTop;
});

优点：改动量小，无需替换PDF渲染方式；缺点：滚动同步可能存在延迟，难以处理PDF内部的横向滚动条。

3. 将PDF转为图片/HTML嵌入（仅特殊场景使用） #

把PDF转成系列图片或静态HTML页面后嵌入，这样可以用普通CSS控制滚动条，但会失去PDF的原生交互（如文本复制、搜索），且文件体积会显著增大。

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