浣跨敤CSS璁剧疆婊氬姩鏉℃牱寮廮CSS鏁欑▼_CSS

来源：jb51　　时间：2021/12/20 17:35:02　　对本文有异议

鍥犱负鍦ㄧ幇鍦ㄧ殑澶ч儴鍒嗛」鐩腑寰堝閮界敤鍒颁簡婊氬姩鏉★紝鏈夋椂鍊欑敤鍒版ā鎷熺殑婊氬姩鏉★紝鐜板湪璇翠笅婊氬姩鏉＄殑CSS涔熻兘瑙ｅ喅銆?/p>

姣斿缃戞槗閭鐨勬粴鍔ㄦ潯鏍峰瓙寰堝ソ鐪嬶紝灏辨槸鍒╃敤鐨凜SS鏉ヨ缃殑锛岃€屼笖鏄痺ebkit娴忚鍣ㄧ殑銆傚鍥炬墍绀猴細

涓嬮潰灏辫瑙ｈ繖鍑犱釜灞炴€ф€庝箞浣跨敤锛屼唬琛ㄤ粈涔堟剰鎬濄€?/p>

涓€锛歸ebkit涓嬮潰鐨凜SS璁剧疆婊氬姩鏉?/h3>

涓昏鏈変笅闈?涓睘鎬?/p>

::-webkit-scrollbar 婊氬姩鏉℃暣浣撻儴鍒嗭紝鍙互璁剧疆瀹藉害鍟ョ殑
::-webkit-scrollbar-button 婊氬姩鏉′袱绔殑鎸夐挳
::-webkit-scrollbar-track 澶栧眰杞ㄩ亾
::-webkit-scrollbar-track-piece 鍐呭眰婊氬姩妲?/li>
::-webkit-scrollbar-thumb 婊氬姩鐨勬粦鍧?/li>
::-webkit-scrollbar-corner 杈硅
::-webkit-resizer 瀹氫箟鍙充笅瑙掓嫋鍔ㄥ潡鐨勬牱寮?/li>

濡傚浘鎵€绀猴細

涓婇潰鏄粴鍔ㄦ潯鐨勪富瑕佸嚑涓缃睘鎬э紝杩樻湁鏇磋灏界殑CSS灞炴€?/p>

:horizontal姘村钩鏂瑰悜鐨勬粴鍔ㄦ潯

:vertical鍨傜洿鏂瑰悜鐨勬粴鍔ㄦ潯

:decrement搴旂敤浜庢寜閽拰鍐呭眰杞ㄩ亾(track piece)銆傚畠鐢ㄦ潵鎸囩ず鎸夐挳鎴栬€呭唴灞傝建閬撴槸鍚︿細鍑忓皬瑙嗙獥鐨勪綅缃?姣斿锛屽瀭鐩存粴鍔ㄦ潯鐨勪笂闈紝姘村钩婊氬姩鏉＄殑宸﹁竟銆?

:incrementdecrement绫讳技锛岀敤鏉ユ寚绀烘寜閽垨鍐呭眰杞ㄩ亾鏄惁浼氬澶ц绐楃殑浣嶇疆(姣斿锛屽瀭鐩存粴鍔ㄦ潯鐨勪笅闈㈠拰姘村钩婊氬姩鏉＄殑鍙宠竟銆?

:start浼被涔熷簲鐢ㄤ簬鎸夐挳鍜屾粦鍧椼€傚畠鐢ㄦ潵瀹氫箟瀵硅薄鏄惁鏀惧埌婊戝潡鐨勫墠闈€?/p>

:end绫讳技浜巗tart浼被锛屾爣璇嗗璞℃槸鍚︽斁鍒版粦鍧楃殑鍚庨潰銆?/p>

:double-button璇ヤ吉绫讳互鐢ㄤ簬鎸夐挳鍜屽唴灞傝建閬撱€傜敤浜庡垽鏂竴涓寜閽槸涓嶆槸鏀惧湪婊氬姩鏉″悓涓€绔殑涓€瀵规寜閽腑鐨勪竴涓€傚浜庡唴灞傝建閬撴潵璇达紝瀹冭〃绀哄唴灞傝建閬撴槸鍚︾揣闈犱竴瀵规寜閽€?/p>

:single-button绫讳技浜巇ouble-button浼被銆傚鎸夐挳鏉ヨ锛屽畠鐢ㄤ簬鍒ゆ柇涓€涓寜閽槸鍚﹁嚜宸辩嫭绔嬬殑鍦ㄦ粴鍔ㄦ潯鐨勪竴娈点€傚鍐呭眰杞ㄩ亾鏉ヨ锛屽畠琛ㄧず鍐呭眰杞ㄩ亾鏄惁绱ч潬涓€涓猻ingle-button銆?/p>

:no-button鐢ㄤ簬鍐呭眰杞ㄩ亾锛岃〃绀哄唴灞傝建閬撴槸鍚﹁婊氬姩鍒版粴鍔ㄦ潯鐨勭粓绔紝姣斿锛屾粴鍔ㄦ潯涓ょ娌℃湁鎸夐挳鐨勬椂鍊欍€?/p>

:corner-present鐢ㄤ簬鎵€鏈夋粴鍔ㄦ潯杞ㄩ亾锛屾寚绀烘粴鍔ㄦ潯鍦嗚鏄惁鏄剧ず銆?/p>

:window-inactive鐢ㄤ簬鎵€鏈夌殑婊氬姩鏉¤建閬擄紝鎸囩ず搴旂敤婊氬姩鏉＄殑鏌愪釜椤甸潰瀹瑰櫒(鍏冪礌)鏄惁褰撳墠琚縺娲汇€?鍦╳ebkit鏈€杩戠殑鐗堟湰涓紝璇ヤ吉绫讳篃鍙互鐢ㄤ簬::selection浼厓绱犮€倃ebkit鍥㈤槦鏈夎鍒掓墿灞曞畠骞舵帹鍔ㄦ垚涓轰竴涓爣鍑嗙殑浼被)

CSS涔熷緢绠€鍗曪紝渚嬶細

/* 璁剧疆婊氬姩鏉＄殑鏍峰紡 */
::-webkit-scrollbar {
width:12px;
}
/* 婊氬姩妲?*/
::-webkit-scrollbar-track {
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
border-radius:10px;
}
/* 婊氬姩鏉℃粦鍧?*/
::-webkit-scrollbar-thumb {
border-radius:10px;
background:rgba(0,0,0,0.1);
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background:rgba(255,0,0,0.4);
}