0

How to customize scrollbar for atom electron iframe or webview ?

My example:

<!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>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Agris Čerevko
  • 11
  • 2
  • Since Electron uses Chrome, see [this answer](https://stackoverflow.com/a/16928546) on how to style scrollbars in WebKit (and Chrome). Just apply a CSS style to the elements to use that solution. – Alexander Leithner Oct 21 '18 at 15:07
  • Yes I know that Electron uses Chrome, and your advice works on all elements except and – Agris Čerevko Oct 21 '18 at 18:27

1 Answers1

0

Electron 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);
        }`);
    });
coelo physis
  • 31
  • 3