Set cef srcoll bar's css style

最新推荐文章于 2022-08-13 19:27:15 发布

原创最新推荐文章于 2022-08-13 19:27:15 发布 · 419 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CEF CSS

cef native JS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在Cef客户端中通过JavaScript动态注入CSS样式的方法，以改变滚动条的外观。该方法适用于需要定制浏览器控件样式的应用场景。

void ClientHandler::OnLoadStart(CefRefPtr<CefBrowser> browser,
                                CefRefPtr<CefFrame> frame) {
  REQUIRE_UI_THREAD();
  std::string js = "var headID = document.head;"
                   "var styleNode = document.createElement('style');"
                   "styleNode.type='text/css';"
                   "styleNode.appendChild(document.createTextNode('::-webkit-scrollbar {width:17px; } ::-webkit-scrollbar-thumb { background: rgba(255,0,0,0.8); }'));"
                   "document.head.appendChild(styleNode);";
  frame->ExecuteJavaScript(js, frame->GetURL(), 0);
                   //"styleNode.appendChild(document.createTextNode('::-webkit-scrollbar {width:38px; height:38px;} ::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3); } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }'));"
}