html設定Qwebview滾動條的樣式風格

2021-07-10 10:35:33 字數 2004 閱讀 4732

今天有點空閒,想起來上次有個qwebview的滾動條的style,一直都沒有實現,就用html5試了一下,

雖然不好看,也有好幾個功能還沒有實現,現在將自己寫的分享出來,大神勿噴,還望不吝賜教。

先看看一些滾動條設定的屬性:

1.overflow

: visible卻省值,沒有div滾動條,根據內容自動擴撐區域的大小,即定義的區域無效

scroll總是顯示滾動條

hidden沒有滾動條,超出區域的內容不可見

auto根據內容自動判斷是否新增滾動條

2.overflow-x:hidden;

/*隱藏底部的橫向滾動條*/

scrollbar-arrow-color

: #f4ae21;

/*三角箭頭的顏色*/

scrollbar-face-color

: #333;

/*立體滾動條的顏色*/

scrollbar-3dlight-color

: #666;

/*立體滾動條亮邊的顏色*/

scrollbar-highlight-color

: #666;

/*滾動條空白部分的顏色*/

scrollbar-shadow-color

: #999;

/*立體滾動條陰影的顏色*/

scrollbar-darkshadow-color

: #666;

/*滾動條強陰影顏色*/

scrollbar-track-color

: #666;

/*立體滾動條背景顏色*/

scrollbar-base-color

: #f8f8f8;

/*滾動條的基本顏色*/

3.overflow-xoverflow-y

visible卻省值,沒有div滾動條,根據內容自動擴撐區域的大小,即定義的區域無效

scroll總是顯示滾動條

hidden沒有div滾動條,超出區域的內容不可見

auto根據內容自動判斷是否新增滾動條

再上實際效果圖:

再來看看源**:

::-webkit-scrollbar

::-webkit-scrollbar-track

//滾動條的face style 和後面的槽

::-webkit-scrollbar-thumb

//不知道為什麼,這一行好像沒有用

::-webkit-scrollbar-thumb:hover

//滑鼠按下去後滾動條style

::-webkit-scrollbar-thumb:active

另外,附加乙份qlistwidget滾動條的style:

qlistwidget的滾動條的style可以直接在樣式表裡面設定,setstylesheet();函式設定他的樣式表。

// 設定垂直滾動條基本樣式

qscrollbar:vertical

qscrollbar::handle:vertical

qscrollbar::handle:vertical:hover

qscrollbar::add-line:vertical // 這個應該是設定下箭頭的,3.png就是箭頭

qscrollbar::sub-line:vertical // 設定上箭頭

qscrollbar::add-line:vertical:hover // 當滑鼠放到下箭頭上的時候

qscrollbar::sub-line:vertical:hover // 當滑鼠放到下箭頭上的時候

qscrollbar::add-page:vertical,qscrollbar::sub-page:vertical // 當滾動條滾動的時候,上面的部分和下面的部分

當然也可以用載入檔案的方式來設定滾動條的style。

QWebView設定html內容

qt5.2版本中sethtml格式無效 qstring qsdata testdata qstring qsurlpath d testpath qurl qurl qurl fromlocalfile qsurlpath ui webview sethtml qsdata,qurl ui webv...

HTML快取設定

pragma與no cache用於定義頁面快取,不快取頁面 為了提高速度一些瀏覽器會快取瀏覽者瀏覽過的頁面,通過下面的定義,瀏覽器一般不會快取頁面,而且瀏覽器無法離線瀏覽.常見的取值有private no cache max age must revalidate等,預設為private,其作用根據...

HTML 字型設定

針對font family屬性進行詳細設定,首先我們要了解,字型分類 有襯線字型 serif,一般用在段落處或者非標題部分 當我們設定字型的時候,設定順序應該是 example font family x y z san serif 系統如果找不到x,y,z字型,那麼會找本機上預設的san seri...