CefSharp自定义滚动条样式

陈世高

在WinForm/WPF中使用CefSharp混合开发时，通常需要自定义滚动条样式，以保证应用的整体风格统一。本文将给出一个简单的示例介绍如何自定义CefSharp中滚动条的样式。
基本思路

在前端开发中，通过CSS来控制滚动条的样式是件寻常的事情。CefSharp也提供了功能强大的API方便开发人员使用c#与JS进行交互。这也给我们提供了一个思路：在CefSharp加载完成后，使用其提供的ExecuteJavaScriptAsync方法注入JS和CSS代码来自定义滚动条样式。
实现细节

为了排除干扰以及方便介绍，本文直接从GitHub上下载CefSharp.MinimalExample的示例代码进行修改。
首先用CSS定义滚动条的样式，介绍滚动条组成部分以及通过CSS控制其样式的文章挺多，比如MDN Web Docs。这里直接贴代码。

1. /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
2. ::-webkit-scrollbar  
3. {  
4.     width: 6px;  
5.     height: 6px;  
6.     background-color: #FFF;
7.     cursor:pointer;
8. }   
9. /*定义滚动条轨道 内阴影+圆角 */
10. ::-webkit-scrollbar-track  
11. {  
12.     box-shadow: inset 0 0 6px rgba(155,155,155,0.3);
13.     border-radius: 5px;  
14.     background-color: #FFF;
15.     cursor:pointer;
16. }
17. ::-webkit-scrollbar-button
18. {
19.     display: none;
20. }
21. /*定义滑块 内阴影+圆角*/  
22. ::-webkit-scrollbar-thumb
23. {   
24.     border:1px solid #c6c6c6;
25.     border-radius: 5px;  
26.     background: #c6c6c6;
27.     cursor:pointer;
28.     background-repeat: no-repeat;
29.     background-position:center;
30. }  

复制代码

接下来就是把CSS样式注入到CefSharp中，按照CefSharp的wiki描述，JavaScript脚本只能在V8Context中执行，并且是在Frame级别执行。对于没有上下文的在Frame，一旦在Frame加载，就可以使用IFrame.ExecuteJavaScriptAsync创建V8Context。
在CefSharp中，IBrowser和IFrame对象用于向浏览器发送命令和在回调方法中获取状态信息，每个IBrowser对象都有一个主IFrame对象表示顶层frame(MainFrame)，零个或多个IFrame对象表示子frame。
为了尽早把CSS样式注入到CefSharp中，可以在监听Browser.FrameLoadEnd事件并执行脚本。

1. public MainWindow()
2. {
3.     InitializeComponent();
4.     Browser.FrameLoadEnd += Browser_FrameLoadEnd;
5. }
7. private void Browser_FrameLoadEnd(object sender, FrameLoadEndEventArgs e)
8. {
10.     if (e.Frame.IsMain)
11.     {
12.         //这里的style就是上一个代码片段中css样式的字符串
13.         AddStyle(style);
14.     }
15. }
17. /// <summary>
18. /// 添加CSS样式表
19. /// </summary>
20. /// <param name="style">样式内容</param>
21. public void AddStyle(string style)
22. {
23.     if (string.IsNullOrEmpty(style)) return;
25.     StringBuilder sb = new StringBuilder();
26.     sb.AppendLine("{let script = document.createElement('style');");
27.     sb.Append("let node=document.createTextNode('").Append(style.Replace("\n", string.Empty).Replace("\r", string.Empty)).Append("');");
28.     sb.AppendLine("script.appendChild(node);");
29.     sb.AppendLine("let elements = document.getElementsByTagName('head');");
30.     sb.AppendLine("if(elements.length>0){elements[0].appendChild(script);}");
31.     sb.AppendLine("else if( (elements = document.getElementsByTagName('body')).length>0){elements[0].appendChild(script);}}");
33.     Browser.GetMainFrame().ExecuteJavaScriptAsync(sb.ToString());
34. }

复制代码

实现效果如下，滚动条的样式已被修改。在CefSharp的开发者工具中也可以看到注入的CSS样式。

来源:https://www.cnblogs.com/czwy/archive/2023/10/07/17747351.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！