关于cef的介绍我就不说了,给个链接:
https://code.google.com/p/chromiumembedded/
在进行自定义浏览器开发时,滚动条是一个很关键的问题,自带的滚动条是乳白色的,很可能和UI设计的效果图不相符,这就需要我们自己做修改。
方法一隐藏原有滚动条:
最开始我想用directUI去画一个,然后利用WM_MOVEWHEEL消息来响应,但前提是隐藏原有滚动条,那么如何隐藏呢?
cef有一个自带的设置:
CefBrowserSettings settings;
找了一圈,发现没有方法可以隐藏滚动条,但pop出的窗口确实可以隐藏,在一个结构体中,叫CefPopupFeaturesTraits。
这时就应该变通了一下了,我们可以从网页本身入手,在网页中加入样式:
去掉横向滚动条:<body style='overflow:scroll;overflow-x:hidden'>
去掉竖向滚动条:<body style='overflow:scroll;overflow-y:hidden'>
两个都去掉:<body style='overflow:scroll;overflow-x:hidden;overflow-y:hidden'>
方法二.修改原有滚动条:
还是利用css样式,来修改滚动条,值得注意的是,ie的滚动条样式和chrome的样式不能通用,下面给出一个完整的例子(只有在chrome中运行才有效果):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>IE滚动条的CSS样式</title>
<STYLE>
::-webkit-scrollbar
{
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track-piece
{
background-color: #CCCCCC;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical
{
height: 5px;
background-color: #999999;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal
{
width: 5px;
background-color: #CCCCCC;
-webkit-border-radius: 6px;
}
</STYLE>
</head>
<body>
<table><tr><td height="1920">请看右边的滚动条</tr></td></table>
</body>
</html>
方法三.修改浏览器设置:
对于以上两种方法的修改只是针对于网页的,如果想修改默认的滚动条,就得对cef程序进行设置了:
在网上看到的一个方法:
browserDefaults.user_style_sheet_enabled = true;
CefString(&browserDefaults.user_style_sheet_location).FromASCII("data:text/css;charset=utf-8;base64,csscontent");
browserDefaults.universal_access_from_file_urls_allowed = true;
browserDefaults.file_access_from_file_urls_allowed = true;
前两种方法已经可以满足我的需求了,第三种方法一会儿我试试。。
————————————————————————————————————————————————分割线——————————————————————————————
测试成功:参考http://www.magpcss.org/ceforum/viewtopic.php?f=10&t=278&start=10#p1478