How to customize scrollbar for atom electron iframe or webview?

主宰稳场 提交于 2021-01-07 03:39:54

问题


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>

回答1:


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);
        }`);
    });


来源:https://stackoverflow.com/questions/52914439/how-to-customize-scrollbar-for-atom-electron-iframe-or-webview

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!