有沒(méi)有覺(jué)得瀏覽器自帶的原始滾動(dòng)條很不美觀，同時(shí)也有看到很多網(wǎng)站的自定義滾動(dòng)條顯得高端，就連chrome32.0開(kāi)發(fā)板都拋棄了原始的滾動(dòng)條，美觀多了。那webkit瀏覽器是如何自定義滾動(dòng)條的呢？
前言
webkit支持擁有overflow屬性的區(qū)域，列表框，下拉菜單，textarea的滾動(dòng)條自定義樣式，所以用處還是挺大的。當(dāng)然，兼容所有瀏覽器的滾動(dòng)條樣式目前是不存在的。
演示
來(lái)看看這2個(gè)滾動(dòng)條demo：?demo1（圖片版）、demo2（純CSS3版）
滾動(dòng)條組成
::-webkit-scrollbar 滾動(dòng)條整體部分
::-webkit-scrollbar-thumb??滾動(dòng)條里面的小方塊，能向上向下移動(dòng)（或往左往右移動(dòng)，取決于是垂直滾動(dòng)條還是水平滾動(dòng)條）
::-webkit-scrollbar-track??滾動(dòng)條的軌道（里面裝有Thumb）
::-webkit-scrollbar-button 滾動(dòng)條的軌道的兩端按鈕，允許通過(guò)點(diǎn)擊微調(diào)小方塊的位置。
::-webkit-scrollbar-track-piece 內(nèi)層軌道，滾動(dòng)條中間部分（除去）
::-webkit-scrollbar-corner 邊角，即兩個(gè)滾動(dòng)條的交匯處
::-webkit-resizer 兩個(gè)滾動(dòng)條的交匯處上用于通過(guò)拖動(dòng)調(diào)整元素大小的小控件
簡(jiǎn)潔版
這里就不貼出詳細(xì)代碼了，demo里面可以通過(guò)查看源碼尋找具體樣式的設(shè)置。來(lái)看看demo2中第二個(gè)滾動(dòng)條的樣式
/*定義滾動(dòng)條高寬及背景 高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/
::-webkit-scrollbar
{
width: 16px;
height: 16px;
background-color: #F5F5F5;
}
/*定義滾動(dòng)條軌道 內(nèi)陰影+圓角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定義滑塊 內(nèi)陰影+圓角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}詳細(xì)設(shè)置
定義滾動(dòng)條就是利用偽元素與偽類，那什么是偽元素和偽類呢？
偽類大家應(yīng)該很熟悉:link,:focus,:hover，此外CSS3中又增加了許多偽類選擇器，如:nth-child，:last-child，:nth-last-of-type()等。
CSS中的偽元素大家以前看過(guò)：:first-line,:first-letter,:before,:after。那么在CSS3中，偽元素進(jìn)行了調(diào)整，在以前的基礎(chǔ)上增加了一個(gè)“：”也就是現(xiàn)在變成了“::first-letter,::first-line,::before,::after”，另外CSS3還增加了一個(gè)“::selection”。兩個(gè)“：：”和一個(gè)“：”在css3中主要用來(lái)區(qū)分偽類和偽元素。
webkit的偽類和偽元素的實(shí)現(xiàn)很強(qiáng)，可以把滾動(dòng)條當(dāng)成一個(gè)頁(yè)面元素來(lái)定義，再結(jié)合一些高級(jí)的CSS3屬性，比如漸變、圓角、RGBa等等。然后如果有些地方要用圖片，可以把圖片也可以轉(zhuǎn)換成Base64，不然每次都得加載那個(gè)多個(gè)圖片，增加請(qǐng)求數(shù)。
任何對(duì)象都可以設(shè)置：邊框、陰影、背景圖片等等，創(chuàng)建的滾動(dòng)條任然會(huì)按照操作系統(tǒng)本身的設(shè)置來(lái)完成其交互的行為。下面的偽類可以應(yīng)用到上面的偽元素中。有點(diǎn)小復(fù)雜，具體怎么寫(xiě)可以看第一個(gè)demo，那里也有注釋。
:horizontal
//horizontal偽類適用于任何水平方向上的滾動(dòng)條
:vertical
//vertical偽類適用于任何垂直方向的滾動(dòng)條
:decrement
//decrement偽類適用于按鈕和軌道碎片。表示遞減的按鈕或軌道碎片，例如可以使區(qū)域向上或者向右移動(dòng)的區(qū)域和按鈕
:increment
//increment偽類適用于按鈕和軌道碎片。表示遞增的按鈕或軌道碎片，例如可以使區(qū)域向下或者向左移動(dòng)的區(qū)域和按鈕
:start
//start偽類適用于按鈕和軌道碎片。表示對(duì)象（按鈕 軌道碎片）是否放在滑塊的前面
:end
//end偽類適用于按鈕和軌道碎片。表示對(duì)象（按鈕 軌道碎片）是否放在滑塊的后面
:double-button
//double-button偽類適用于按鈕和軌道碎片。判斷軌道結(jié)束的位置是否是一對(duì)按鈕。也就是軌道碎片緊挨著一對(duì)在一起的按鈕。
:single-button
//single-button偽類適用于按鈕和軌道碎片。判斷軌道結(jié)束的位置是否是一個(gè)按鈕。也就是軌道碎片緊挨著一個(gè)單獨(dú)的按鈕。
:no-button
no-button偽類表示軌道結(jié)束的位置沒(méi)有按鈕。
:corner-present
//corner-present偽類表示滾動(dòng)條的角落是否存在。
:window-inactive
//適用于所有滾動(dòng)條，表示包含滾動(dòng)條的區(qū)域，焦點(diǎn)不在該窗口的時(shí)候。
::-webkit-scrollbar-track-piece:start {
/*滾動(dòng)條上半邊或左半邊*/
}
::-webkit-scrollbar-thumb:window-inactive {
/*當(dāng)焦點(diǎn)不在當(dāng)前區(qū)域滑塊的狀態(tài)*/
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/*當(dāng)鼠標(biāo)在水平滾動(dòng)條下面的按鈕上的狀態(tài)*/
}Atas ialah kandungan terperinci CSS3自定義滾動(dòng)條樣式：webkit-scrollbar的詳解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apa itu 'menyekat CSS'?
Jun 24, 2025 am 12:42 AM
CSS Blok halaman yang diberikan kerana pelayar melihat CSS dalam talian dan luaran sebagai sumber utama secara lalai, terutamanya dengan stylesheet yang diimport, header sejumlah besar CSS sebaris, dan gaya pertanyaan media yang tidak dapat dioptimumkan. 1. Ekstrak CSS kritikal dan membenamkannya ke HTML; 2. Kelewatan memuatkan CSS bukan kritikal melalui JavaScript; 3. Gunakan atribut media untuk mengoptimumkan pemuatan seperti gaya cetak; 4. Memampatkan dan menggabungkan CSS untuk mengurangkan permintaan. Adalah disyorkan untuk menggunakan alat untuk mengekstrak CSS utama, menggabungkan REL = "Preload" pemuatan asynchronous, dan menggunakan media yang ditangguhkan dengan munasabah untuk mengelakkan pemisahan yang berlebihan dan kawalan skrip kompleks.
Luaran vs CSS Dalaman: Apakah pendekatan terbaik?
Jun 20, 2025 am 12:45 AM
Thebestapproachforcssdependonstantheproject'ssspecificneeds.forlargerprojects, externalcssisbetterduetomaintainabilityability;
Apakah perbezaan utama antara nilai paparan dalam talian, blok, blok, dan flex?
Jun 20, 2025 am 01:01 AM
Memilih nilai paparan yang betul dalam CSS adalah penting kerana ia mengawal tingkah laku unsur -unsur dalam susun atur. 1.Inline: Buat unsur -unsur mengalir seperti teks, tanpa menduduki satu baris, dan tidak dapat secara langsung menetapkan lebar dan ketinggian, sesuai untuk unsur -unsur dalam teks, seperti; 2.Block: Buat unsur -unsur secara eksklusif menduduki satu baris dan menduduki semua lebar, boleh menetapkan lebar dan ketinggian dan margin dalaman dan luaran, sesuai untuk unsur -unsur berstruktur, seperti; 3. Secur-block: Mempunyai kedua-dua ciri blok dan susun atur sebaris, boleh menetapkan saiz tetapi masih dipaparkan dalam baris yang sama, sesuai untuk susun atur mendatar yang memerlukan jarak yang konsisten; 4.Flex: Mod susun atur moden, sesuai untuk bekas, mudah untuk mencapai penjajaran dan pengedaran melalui kandungan yang wajar, lien-item dan atribut lain, ya
Apakah AutoPrefixer dan bagaimana ia berfungsi?
Jul 02, 2025 am 01:15 AM
AutoPrefixer adalah alat yang secara automatik menambah awalan vendor ke atribut CSS berdasarkan skop penyemak imbas sasaran. 1. Ia menyelesaikan masalah mengekalkan awalan secara manual dengan kesilapan; 2. Bekerja melalui borang pemalam postcss, menghuraikan CSS, menganalisis atribut yang perlu diawali, dan menjana kod mengikut konfigurasi; 3. Langkah-langkah penggunaan termasuk memasang pemalam, menetapkan senarai pelayar, dan membolehkan mereka dalam proses membina; 4. Nota termasuk tidak menambah awalan secara manual, menyimpan kemas kini konfigurasi, awalan tidak semua atribut, dan disyorkan untuk menggunakannya dengan preprocessor.
Bagaimana anda boleh menghidupkan SVG dengan CSS?
Jun 30, 2025 am 02:06 AM
AnimatingsvgwithcssispossibleusingkeyframesforbasicicanimationsandTransisiSforinterActiveFt.1.use@keyframestodefineAnimationStageFropertiesLikescale, Opacity, andColor.2.AplyTheAnimationTosvgelements.
Apakah fungsi conic-gradient ()?
Jul 01, 2025 am 01:16 AM
Function-gradient () functionIncsscreatesculculargradientsthatrotatecolorstopsaroundroentroint.1.ISIISIDEALFORPIECHARTS, Progressindicators, Colorwheels, andDecorativeBackgrounds.2.itworksByDefiningColorStopsatSpecificles, OpsticalStarting
Apakah skop harta tersuai CSS?
Jun 25, 2025 am 12:16 AM
Skop sifat adat CSS bergantung kepada konteks perisytiharan mereka, pembolehubah global biasanya ditakrifkan dalam: akar, manakala pembolehubah tempatan ditakrifkan dalam pemilih khusus untuk komponen dan pengasingan gaya. Sebagai contoh, pembolehubah yang ditakrifkan dalam kelas .card hanya tersedia untuk unsur -unsur yang sepadan dengan kelas dan anak -anak mereka. Amalan terbaik termasuk: 1. Penggunaan: Root untuk menentukan pembolehubah global seperti warna topik; 2. Tentukan pembolehubah tempatan di dalam komponen untuk melaksanakan enkapsulasi; 3. Elakkan berulang kali mengisytiharkan pemboleh ubah yang sama; 4. Beri perhatian kepada masalah liputan yang mungkin disebabkan oleh kekhususan pemilih. Di samping itu, pembolehubah CSS adalah sensitif kes dan harus ditakrifkan sebelum digunakan untuk mengelakkan kesilapan. Jika pemboleh ubah tidak ditentukan atau rujukan gagal, nilai sandaran atau nilai awal lalai akan digunakan. Debug boleh dilakukan melalui pemaju penyemak imbas
Tutorial CSS yang memberi tumpuan kepada reka bentuk pertama mudah alih
Jul 02, 2025 am 12:52 AM
Mudah alih-firstcssdesignrequiressettingtheViewportmetatag, menggunakan pelindung, stylingfromsmallscreensup, optimizingtypographyandtouchtargets.first, addtocontrolscaling.second, use%, eM, orreminsteadofpixelflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflex
