如何为原子电子 iframe 或 webview 自定义滚动条？答案

【问题标题】：How to customize scrollbar for atom electron iframe or webview?如何为原子电子 iframe 或 webview 自定义滚动条？
【发布时间】：2019-03-25 15:34:07
【问题描述】：

如何为 atom electron iframe 或 webview 自定义滚动条？

我的例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <titleScrollbar Demo</title>
  </head>

  <body style="margin: 0px;overflow:hidden;">

    <iframe src="http://bbc.com" height="500" width="500"></iframe>
    <webview src="http://bbc.com" height="500" width="500"></webview>

  </body>
</html>

【问题讨论】：

由于 Electron 使用 Chrome，请参阅 this answer 了解如何在 WebKit（和 Chrome）中设置滚动条样式。只需将 CSS 样式应用于元素即可使用该解决方案。
是的，我知道 Electron 使用 Chrome，您的建议适用于除和之外的所有元素

标签： iframe webview electron scrollbar

【解决方案1】：

电子 11：

    this.webview.addEventListener("dom-ready",  (e: Electron.IpcMessageEvent) => {
      this.webview.insertCSS(`
        ::-webkit-scrollbar {
          width: 10px;
          height: 10px;
        }            
        ::-webkit-scrollbar-track {
          background-color: rgb(32, 40, 48);
        }
        ::-webkit-scrollbar-track-piece {
          background-color: rgb(18, 22, 26);
        }
        ::-webkit-scrollbar-thumb {
          height: 25%;
          background-color: rgb(32, 40, 48);
          border: 1px rgb(18, 22, 26) solid;
        }
        ::-webkit-scrollbar-corner {
          background-color: rgb(32, 40, 48);
        }`);
    });

【讨论】：