如何在WebEngineView中调整滚动条的宽度？

Posted 2021-04-11

我使用的是QML组件WebEngineView，据观察，滚动条默认是在WebEngineView中实现的，但是没有界面可以改变滚动条的宽度。这在我无法使用滑动的用例中是必需的，我只能在WebEngineView的滚动条上使用鼠标拖动操作，以便查看长度在视口区域之外的Web内容的所有隐藏部分。由于WebEngineView的Scrollbar大小（默认为非常小的15pix），因此很难在区域上精确拖动并使用鼠标拖动。

有人可以建议如何自定义WebEngineView的滚动条吗？

要么

我可以找到webengine源代码，然后修改和构建用于此目的？

要么

任何样式都可以应用于WebEngineView？

我使用的是Qt 5.6.2

Qt Webengine源代码观察：QML Webengineview内部没有设置任何滚动条宽度，而是使用可能是chrome的后端滚动条。

答案

WebEngineView使用来自Chromium后端的滚动条，并且没有QML或C ++ API可以直接自定义它。但是WebEngine支持在CSS中更改这些滚动条样式，因此您唯一能做的就是安装一个在所有-webkit-scrollbar上应用更大宽度的用户脚本。

请参阅此相关示例：http://doc.qt.io/qt-5.10/qtwebengine-webenginewidgets-stylesheetbrowser-example.html

你的样式表看起来像这样：

::-webkit-scrollbar {
  width: 40px;
}