scrollbar-color
Baseline
2025
æè¿å©ç¨å¯è½
2025å¹´12æ以éããã®æ©è½ã¯ææ°ã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã³ãã©ã¦ã¶ã¼ã§åä½ãã¾ããå¤ã端æ«ããã©ã¦ã¶ã¼ã§ã¯åä½ããªããã¨ãããã¾ãã
scrollbar-color 㯠CSS ã®ããããã£ã§ãã¹ã¯ãã¼ã«ãã¼ã®ãã©ãã¯ã¨ã¤ã¾ã¿ã®è²ãè¨å®ãã¾ãã
ãã©ãã¯ã¯ã¹ã¯ãã¼ã«ãã¼ã®èæ¯ã表ããä¸è¬çã«ã¹ã¯ãã¼ã«ä½ç½®ã«ãããããåºå®ããã¦ãã¾ãã
ã¤ã¾ã¿ã¯ã¹ã¯ãã¼ã«ãã¼ã®åãé¨åã§ããµã¤ãã¯ãã©ãã¯ã®ä¸ãåãã¾ãã
scrollbar-color ã®å¤ãããã¥ã¡ã³ãã®ã«ã¼ãè¦ç´ ã«è¨å®ããã¦ããå ´åããã®å¤ã¯ãã¥ã¼ãã¼ãã®ã¹ã¯ãã¼ã«ãã¼ã«é©ç¨ããã¾ãã
æ§æ
/* ãã¼ã¯ã¼ãå¤ */
scrollbar-color: auto;
/* <color> å¤ */
scrollbar-color: rebeccapurple green; /* äºã¤ã®æå¹ãªè²ã
ä¸ã¤ç®ã¯ã¹ã¯ãã¼ã«ãã¼ã®ã¤ã¾ã¿ãäºã¤ç®ã¯ãã©ãã¯ã«é©ç¨ãããã */
/* ã°ãã¼ãã«å¤ */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: revert;
scrollbar-color: revert-layer;
scrollbar-color: unset;
å¤
<scrollbar-color>-
ã¹ã¯ãã¼ã«ãã¼ã®è²ãå®ç¾©ãã¾ãã
autoä»ã«ã¹ã¯ãã¼ã«ãã¼ã«é¢ããè²ã®ããããã£ããªãå ´åãã¹ã¯ãã¼ã«ãã¼ã®ä½ç½®ã表ãæ¢å®ã®è¡¨ç¤ºã«ãªãã¾ãã <color> <color>æåã®è²ãã¹ã¯ãã¼ã«ãã¼ã®ã¤ã¾ã¿ã«ã 2 çªç®ã®è²ãã¹ã¯ãã¼ã«ãã¼ã®ãã©ãã¯ã«é©ç¨ãã¾ãã
ã¡ã¢:
@media (forced-colors: active) ã¨ããã¨ãscrollbar-color ã auto ã«ãªãã¾ãã
ã¢ã¯ã»ã·ããªãã£
scrollbar-color ããããã£ã§è²ã®å¤ãæå®ãã¦ä½¿ç¨ããå ´åãæå®ããè²ã®éã«ååãªã³ã³ãã©ã¹ãããããã¨ã確èªãã¦ãã ããããã¼ã¯ã¼ãå¤ã®å ´åãã¦ã¼ã¶ã¼ã¨ã¼ã¸ã§ã³ãã¯ä½¿ç¨ããè²ã®éã«ååãªã³ã³ãã©ã¹ãããããã¨ãä¿è¨¼ãã¦ãã ããã Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1 ãåç
§ãã¦ãã ããã
å ¬å¼å®ç¾©
| åæå¤ | auto |
|---|---|
| é©ç¨å¯¾è±¡ | ã¹ã¯ãã¼ã«ããããã¯ã¹ |
| ç¶æ¿ | ãã |
| è¨ç®å¤ | æå®éã |
| ã¢ãã¡ã¼ã·ã§ã³ã®ç¨®é¡ | è¨ç®å¤ã®åã«ãã |
å½¢å¼ææ³
scrollbar-color =
auto |
<color>{2}
ä¾
ããµããå ´åã®ã¹ã¯ãã¼ã«ãã¼ã«çè²ãã
CSS
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: #000077 #bada55;
}
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-color |
ãã©ã¦ã¶ã¼ã®äºææ§
é¢é£æ å ±
- CSS ãªã¼ãã¼ããã¼ã¢ã¸ã¥ã¼ã«
- CSS ã¹ã¯ãã¼ã«ãã¼ã¹ã¿ã¤ã«è¨å®ã¢ã¸ã¥ã¼ã«
overflowscrollbar-gutterscrollbar-width