You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

QWebEngineView滚动条自定义:红圈标注部件名称咨询

QtWebEngineView滚动条自定义问题

粉色区域是一个QtWebEngineView部件,我正尝试对其滚动条进行自定义。下图中红圈标注的部件名称是什么?

红圈标注的滚动条相关部件

它仅与滚动条一同显示,我不确定它是否属于滚动条的一部分。

以下是当前应用于该部件的代码(包含自定义滚动条的CSS):

class WebEngine : public QWebEngineView
{
    Q_OBJECT

public:

    WebEngine(QWidget* parent = 0) : QWebEngineView(parent)
    {
        this->setAttribute(Qt::WA_TranslucentBackground);
        this->setStyleSheet("background:transparent");
        this->page()->setBackgroundColor(Qt::transparent);

        insertStyleSheet("scrollbar",
            R"(
                /* Width */
                ::-webkit-scrollbar {
                  width: 10px;
                }
    
                /* Track */
                ::-webkit-scrollbar-track {
                   display:none;  /* Makes the track transparent */
                }
    
                /* Thumb */
                ::-webkit-scrollbar-thumb {
                  border-radius: 12px;
                  background: #160005;
                }
    
                /* Thumb on hover */
                ::-webkit-scrollbar-thumb:hover {
                  background: #2a2a2a;
                }
            )"
            , true);
    }

    void insertStyleSheet(const QString& name, const QString& source, bool immediately)
    {
        QWebEngineScript script;
        QString s = QString::fromLatin1("(function() {"\
            "    css = document.createElement('style');"\
            "    css.type = 'text/css';"\
            "    css.id = '%1';"\
            "    document.head.appendChild(css);"\
            "    css.innerText = '%2';"\
            "})()").arg(name).arg(source.simplified());

        if (immediately)
            this->page()->runJavaScript(s, QWebEngineScript::ApplicationWorld);

        script.setName(name);
        script.setSourceCode(s);
        script.setInjectionPoint(QWebEngineScript::DocumentReady);
        script.setRunsOnSubFrames(true);
        script.setWorldId(QWebEngineScript::ApplicationWorld);
        this->page()->scripts().insert(script);
    }
};

红圈标注的部件是滚动条角落(scrollbar corner),它属于滚动条组件的一部分,通常在同时存在水平和垂直滚动条时,出现在两者的交汇处。

你可以通过WebKit的CSS伪元素::-webkit-scrollbar-corner来自定义它的样式,比如设置为透明隐藏:

::-webkit-scrollbar-corner {
    background: transparent;
}

将这段代码添加到你现有的滚动条样式中,即可控制该部件的显示效果。

内容的提问来源于stack exchange,提问作者Cesar

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.15 23:21:06