webkit下面的CSS設定滾動條

2022-06-23 23:03:18 字數 1363 閱讀 9805

1.主要有下面7個屬性:

::-webkit-scrollbar 滾動條整體部分,可以設定寬度啥的

::-webkit-scrollbar-button 滾動條兩端的按鈕

::-webkit-scrollbar-track  外層軌道

::-webkit-scrollbar-track-piece  內層滾動槽

::-webkit-scrollbar-thumb 滾動的滑塊

::-webkit-scrollbar-corner 邊角

::-webkit-resizer 定義右下角拖動塊的樣式

注:1、-moz代表firefox瀏覽器私有屬性

2、-ms代表ie瀏覽器私有屬性

3、-webkit代表safari、chrome私有屬性

2.如圖:

3.上面是滾動條的主要幾個設定屬性,還有更詳盡的css屬性:

1):horizontal 水平方向的滾動條

2):vertical 垂直 方向的滾動條

3):decrement 應用於按鈕和內層軌道(track piece)。它用來指示按鈕或者內層軌道是否會減小視窗的位置(比如,垂直滾動條的上面,水平滾動條的左邊。)

4):increment decrement類似,用來指示按鈕或內層軌道是否會增大視窗的位置(比如,垂直滾動條的下面和水平滾動條的右邊。)

5):start 偽類也應用於按鈕和滑塊。它用來定義物件是否放到滑塊的前面。

6):end 類似於start偽類,標識物件是否放到滑塊的後面。

7):double-button  該偽類以用於按鈕和內層軌道。用於判斷乙個按鈕是不是放在滾動條同一端的一對按鈕中的乙個。對於內層軌道來說,它表示內層軌道是否緊靠一對按鈕。

8):single-button 類似於double-button偽類。對按鈕來說,它用於判斷乙個按鈕是否自己獨立的在滾動條的一段。對內層軌道來說,它表示內層軌道是否緊靠乙個single-button。

9):no-button 用於內層軌道,表示內層軌道是否要滾動到滾動條的終端,比如,滾動條兩端沒有按鈕的時候。

10):corner-present  用於所有滾動條軌道,指示滾動條圓角是否顯示。

11):window-inactive 用於所有的滾動條軌道,指示應用滾動條的某個頁面容器(元素)是否當前被啟用。(在webkit最近的版本中,該偽類也可以用於::selection偽元素。webkit團隊有計畫擴充套件它並推動成為乙個標準的偽類)

4.用法:

記錄 Debian 下面的時間設定

重灌debian的時候,進入base config程式,提示設定時區 如果選擇失誤,系統時間即會亂套。第一步 編輯檔案 etc timezone為 asia shanghai 第二步 命令date mmddhhmmccyy 設定系統時間和硬體時間為mm dd hh mm,ccyy。顯示時間為本地時間...

純CSS改變webkit核心瀏覽器的滾動條樣式

基於webkit的瀏覽器現在可以自定義其滾動條的樣式了,實現 如下 複製 如下 webkit scrollbar 整體部分 webkit scrollbar track 滑動軌道 webkit scrollbar thumb 滑塊 webkit scro程式設計客棧llbar thumb hover...

css設定滾動調隱藏還是可以滾動

在開發過程中,有時候需要把滾動條隱藏但依然可以實現滾動效果,這個要如何實現呢?原理很簡單,只要在需要隱藏滾動條的div外面加上乙個父div,然後設定父div內容超出隱藏,同時把子div的高設定100 寬設定為100 滾動條的寬 overflow auto,就可以實現滾動條隱藏依然可以滾動效果。實現 ...