From a95e7e1bebf4e41185ffadbe353ea05a95a82c03 Mon Sep 17 00:00:00 2001
From: zty199 <46324746+zty199@users.noreply.github.com>
Date: Sat, 14 Oct 2023 18:23:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=BF=E7=94=A8=E8=87=AA=E5=AE=9A?=
=?UTF-8?q?=E4=B9=89=20webkit=20=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
使用自定义 webkit 滚动条，避免 QWebEngineView 原生滚动条显示（仅在 QWebEnginePage 加载时生效，部分页面动态刷新时滚动条样式不生效）
Log: 使用自定义 webkit 滚动条
---
.../resources/css/webkit-scrollbar.css | 26 +++++++++++++++++
spark-webapp-runtime/resources/resources.qrc | 1 +
spark-webapp-runtime/webenginepage.cpp | 29 +++++++++++++++++++
spark-webapp-runtime/webenginepage.h | 3 ++
4 files changed, 59 insertions(+)
create mode 100644 spark-webapp-runtime/resources/css/webkit-scrollbar.css
diff --git a/spark-webapp-runtime/resources/css/webkit-scrollbar.css b/spark-webapp-runtime/resources/css/webkit-scrollbar.css
new file mode 100644
index 0000000..e8f49df
--- /dev/null
+++ b/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
+}
diff --git a/spark-webapp-runtime/resources/resources.qrc b/spark-webapp-runtime/resources/resources.qrc
index e9722d1..aa75b17 100644
--- a/spark-webapp-runtime/resources/resources.qrc
+++ b/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>
diff --git a/spark-webapp-runtime/webenginepage.cpp b/spark-webapp-runtime/webenginepage.cpp
index ae66356..ffe6742 100644
--- a/spark-webapp-runtime/webenginepage.cpp
+++ b/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) {
diff --git a/spark-webapp-runtime/webenginepage.h b/spark-webapp-runtime/webenginepage.h
index 6ebfb19..9044b80 100644
--- a/spark-webapp-runtime/webenginepage.h
+++ b/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);