scrollbar-width
åºçº¿
2024
æè¿å¯ç¨
èª December 2024 èµ·ï¼æ¤ç¹æ§å·²å¨ææ°æµè§å¨ä¸å¾å°æ¯æãä½å¨è¾æ§ç设å¤ææµè§å¨ä¸å¯è½æ æ³è¿è¡ã
scrollbar-width å±æ§å
许å¼åè
å¨å
ç´ æ¾ç¤ºæ»å¨æ¡æ¶è®¾ç½®æ»å¨æ¡çæ大宽度ã
è¯æ³
/* å
³é®åå¼ */
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;
/* å
¨å±å¼ */
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: revert;
scrollbar-width: revert-layer;
scrollbar-width: unset;
åå¼
- <scrollbar-width>
-
å°æ»å¨æ¡ç宽度å®ä¹ä¸ºæ°å¼å®½åº¦æè é¢å®ä¹å®½åº¦ï¼å½è¢«å®ä¹ä¸ºé¢å®ä¹å®½åº¦æ¶ï¼åå¿ é¡»ä¸ºä¸åå¼ä¹ä¸ï¼
autoç³»ç»é»è®¤çæ»å¨æ¡å®½åº¦ã thinç³»ç»æä¾çç¦æ»å¨æ¡å®½åº¦ï¼æè æ¯é»è®¤æ»å¨æ¡å®½åº¦æ´çªç宽度ã noneä¸æ¾ç¤ºæ»å¨æ¡ï¼ä½æ¯è¯¥å ç´ ä¾ç¶å¯ä»¥æ»å¨ã å¤æ³¨ï¼ç¨æ·ä»£çå¿ é¡»å°åºç¨äºæ ¹å ç´ çä»»ä½
scrollbar-widthå¼åºç¨äºè§å£ã
æ éç¢èè
请注æ使ç¨æ¤å±æ§æ¶éè°¨æ
ãå¦æå¼åè
æªæä¾æ¿ä»£çæ»å¨æºå¶ï¼å° scrollbar-width 设置为 thin æ none å¯è½ä¼ä½¿å
容é¾ä»¥ææ æ³æ»å¨ãè½ç¶å¨è¿ç§æ
åµä¸ï¼æ»å¨æå¿æé¼ æ æ»è½®å¯ä»¥å¯ç¨æ»å¨ï¼ä½æäºè®¾å¤æ²¡ææ»å¨æ¿ä»£æ¹æ¡ã
WCAG æ å 2.1.1ï¼é®çï¼å·²ç»åå¨å¾é¿æ¶é´ï¼ä»¥ä¾¿ä¸ºåºæ¬é®çå¯è®¿é®æ§æä¾å»ºè®®ï¼å¹¶ä¸è¿åºè¯¥å æ¬å 容åºåçæ»å¨ãå¨ WCAG 2.1 ä¸å¼å ¥çæ å 2.5.5ï¼ç®æ 大å°ï¼å»ºè®®è§¦æ¸ç®æ ç宽度åé«åº¦è³å°ä¸º 44 åç´ ï¼å°½ç®¡å¨é«å辨çå±å¹ä¸è¿ä¸ªé®é¢ä¼æ´ä¸¥éï¼å»ºè®®è¿è¡å ¨é¢æµè¯ï¼ã
å½¢å¼å®ä¹
| åå§å¼ | auto |
|---|---|
| éç¨å ç´ | scrolling boxes |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| 计ç®å¼ | as specified |
| å¨ç»ç±»å | 离æ£å¼ |
å½¢å¼è¯æ³
scrollbar-width =
auto |
thin |
none
示ä¾
è°æ´æº¢åºæ»å¨æ¡ç大å°
CSS
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-width: thin;
}
HTML
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
earthnut pea peanut soko zucchini.
</div>
ç»æ
è§è
| è§è |
|---|
| CSS Scrollbars Styling Module Level 1 # scrollbar-width |