feat: 使用自定义 webkit 滚动条

使用自定义 webkit 滚动条，避免 QWebEngineView 原生滚动条显示（仅在 QWebEnginePage 加载时生效，部分页面动态刷新时滚动条样式不生效）

Log: 使用自定义 webkit 滚动条

spark-webapp-runtime/resources/css/webkit-scrollbar.css

@@ -0,0 +1,26 @@
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+    background-color: transparent
+}
+
+::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    border-radius: 99px;
+    background-clip: padding-box;
+    background-color: rgba(80, 80, 80, 0.3);
+    -webkit-transition: background 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+    transition: background 0.2s cubic-bezier(0.34, 0.69, 0.1, 1)
+}
+
+::-webkit-scrollbar-button {
+    display: none
+}
+
+::-webkit-scrollbar-corner {
+    display: none
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(80, 80, 80, 0.6)!important
+}

spark-webapp-runtime/resources/resources.qrc

@@ -1,5 +1,6 @@
 <RCC>
     <qresource prefix="/">
+        <file>css/webkit-scrollbar.css</file>
         <file>images/spark-webapp-runtime.svg</file>
         <file>images/Logo-Spark.png</file>
         <file>images/go-previous-24.svg</file>

spark-webapp-runtime/webenginepage.cpp

@@ -1,10 +1,15 @@
 #include "webenginepage.h"
 
+#include <QFile>
+#include <QWebEngineScript>
+#include <QWebEngineScriptCollection>
 #include <QDesktopServices>
 
 WebEnginePage::WebEnginePage(QObject *parent)
     : QWebEnginePage(parent)
 {
+    initScrollBarStyle();
+
     connect(this, &QWebEnginePage::featurePermissionRequested, [&](const QUrl &origin, QWebEnginePage::Feature feature) {
         if (feature != QWebEnginePage::Notifications) {
             return;
@@ -37,6 +42,30 @@ QWebEnginePage *WebEnginePage::createWindow(QWebEnginePage::WebWindowType type)
     return page;
 }
 
+void WebEnginePage::initScrollBarStyle()
+{
+    //自定义浏览器滚动条样式
+    QFile file(":/css/webkit-scrollbar.css");
+    if (file.open(QFile::ReadOnly)) {
+        QString scrollbarStyleJS = QString("(function() {"
+                                           "    css = document.createElement('style');"
+                                           "    css.type = 'text/css';"
+                                           "    css.id = '%1';"
+                                           "    document.head.appendChild(css);"
+                                           "    css.innerText = '%2';"
+                                           "})()\n")
+                                       .arg("scrollbarStyle")
+                                       .arg(QString::fromUtf8(file.readAll()).simplified());
+        file.close();
+
+        QWebEngineScript script;
+        script.setWorldId(QWebEngineScript::MainWorld);
+        script.setSourceCode(scrollbarStyleJS);
+        scripts().insert(script);
+        runJavaScript(scrollbarStyleJS, QWebEngineScript::ApplicationWorld);
+    }
+}
+
 void WebEnginePage::slotUrlChanged(const QUrl &url)
 {
     if (m_currentUrl == url) {

spark-webapp-runtime/webenginepage.h

@@ -16,6 +16,9 @@ public:
 protected:
     QWebEnginePage *createWindow(WebWindowType type) override;
 
+private:
+    void initScrollBarStyle();
+
 private slots:
     void slotUrlChanged(const QUrl &url);