如何修改iframe滚动条宽度？自定义样式未生效求助

你之前编写的滚动条样式仅对当前页面的滚动条生效，而iframe是独立的文档环境，父页面的样式无法直接作用到iframe内部的滚动条，这就是样式不生效的核心原因。以下是针对不同场景的解决方案：

场景1：iframe加载同域页面 #

• 直接在iframe对应的目标页面中添加你写的滚动条样式代码；
• 或者通过父页面的JavaScript动态给iframe插入样式：

const iframe = document.getElementById('目标iframe的ID');
if (iframe.contentDocument) {
  const styleEl = document.createElement('style');
  styleEl.textContent = `
    ::-webkit-scrollbar {
      width: 10px;
    }
    ::-webkit-scrollbar-track {
      background: #f1f1f1; 
    }
    ::-webkit-scrollbar-thumb {
      background: #888; 
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #555; 
    }
  `;
  iframe.contentDocument.head.appendChild(styleEl);
}

场景2：iframe加载跨域页面 #

受浏览器同源策略限制，无法直接修改iframe内部样式，可尝试以下两种方法：

• 联系iframe页面的开发者，让他们在页面中添加滚动条样式；
• 隐藏iframe自带滚动条，用父页面的容器模拟滚动：

<div class="custom-scroll-container">
  <iframe src="跨域地址" scrolling="no"></iframe>
</div>

对应的CSS：

.custom-scroll-container {
  width: 400px; /* 根据需求设置宽度 */
  height: 500px; /* 根据需求设置高度 */
  overflow: auto;
  /* 自定义滚动条样式 */
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }
}
.custom-scroll-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

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