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

Posted 2023-02-16

【中文标题】如何在 WebEngineView 中调整滚动条的宽度？

【英文标题】：How to resize width of scrollbar in WebEngineView?

【发布时间】：2017-10-31 11:29:26

【问题描述】：

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

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

或

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

或

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

我正在使用 Qt 5.6.2

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

【参考方案1】：

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;