如何自定义原子电子iframe或WebView的滚动条? [英] How to customize scrollbar for atom electron iframe or webview?
本文介绍了如何自定义原子电子iframe或WebView的滚动条?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何为原子电子iframe或webview自定义滚动条?
How to customize scrollbar for atom electron iframe or 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>
推荐答案
电子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);
}`);
});
这篇关于如何自定义原子电子iframe或WebView的滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
