-
Notifications
You must be signed in to change notification settings - Fork 22.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Module landing page: scrollbar styles (#26400)
* Module landing page: scrollbar styles * Module page: css scrollbar styling * Update files/en-us/web/css/css_scrollbars/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Apply suggestions from code review Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * Update files/en-us/web/css/css_scrollbars/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/css_scrollbars/index.md * Update files/en-us/web/css/css_scrollbars/index.md * typo * put compat back in * put compat back in * Update files/en-us/web/css/css_scrollbars/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * remove compat * fix typo --------- Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>
- Loading branch information
3 people
authored
Apr 26, 2023
1 parent
849ea51
commit 04833ec
Showing
1 changed file
with
67 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,101 @@ | ||
| --- | ||
| title: CSS Scrollbars | ||
| title: CSS scrollbars styling | ||
| slug: Web/CSS/CSS_Scrollbars | ||
| page-type: css-module | ||
| spec-urls: https://w3c.github.io/csswg-drafts/css-scrollbars/ | ||
| browser-compat: | ||
| - css.properties.scrollbar-width | ||
| - css.properties.scrollbar-color | ||
| - css.properties.scrollbar-width | ||
| --- | ||
|
|
||
| {{CSSRef}} | ||
| {{CSSRef}}{{SeeCompatTable}} | ||
|
|
||
| **CSS Scrollbars** standardizes the obsolete scrollbar color properties introduced in 2000 by Windows IE 5.5. | ||
| The **CSS scrollbars styling** module defines properties that you can use for visual styling of scrollbars. You can customize the width of the scrollbar as required. You can also customize the color of the scrollbar _track_, which is the background of the scrollbar, and the color of the scrollbar _thumb_, which is the draggable handle of the scrollbar. | ||
|
|
||
| ## Basic example | ||
| ## Scrollbar styling in action | ||
|
|
||
| In this example, we have chosen to use a thin scrollbar with a green track and purple thumb. | ||
| This example defines a thin scrollbar with a red thumb and an orange track. To view the thumb, you will need to scroll the text. After the scrollbar is visible, hover over it to see the track. | ||
|
|
||
| ```css | ||
| .scroller { | ||
| ```css hidden | ||
| .poem { | ||
| width: 300px; | ||
| height: 100px; | ||
| overflow-y: scroll; | ||
| scrollbar-color: rebeccapurple green; | ||
| scrollbar-width: thin; | ||
| border: 1px solid; | ||
| } | ||
| ``` | ||
|
|
||
| ### HTML | ||
| ```css | ||
| .poem { | ||
| overflow: scroll; | ||
| scrollbar-color: red orange; | ||
| 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> | ||
| ```html hidden | ||
| <blockquote class="poem"> | ||
| <h3>A Small Needful Fact</h3> | ||
| <pre> | ||
| Is that Eric Garner worked | ||
| for some time for the Parks and Rec. | ||
| Horticultural Department, which means, | ||
| perhaps, that with his very large hands, | ||
| perhaps, in all likelihood, | ||
| he put gently into the earth | ||
| some plants which, most likely, | ||
| some of them, in all likelihood, | ||
| continue to grow, continue | ||
| to do what such plants do, like house | ||
| and feed small and necessary creatures, | ||
| like being pleasant to touch and smell, | ||
| like converting sunlight | ||
| into food, like making it easier | ||
| for us to breathe. | ||
| </pre | ||
| > | ||
| <p> | ||
| - <a href="https://onbeing.org/poetry/a-small-needful-fact/">Ross Gay</a> | ||
| </p> | ||
| </blockquote> | ||
| ``` | ||
|
|
||
| ### Result | ||
| {{EmbedLiveSample("Scrollbar_styling_in_action")}} | ||
|
|
||
| {{EmbedLiveSample("Basic_Example")}} | ||
| > **Note:** When customizing scrollbars, ensure that the thumb and track have enough contrast with the surrounding background. Also ensure that the scrollbar hit area is large enough for people who use touch input. | ||
| ## Reference | ||
|
|
||
| ### Properties | ||
| ### CSS properties | ||
|
|
||
| - {{CSSxRef("scrollbar-width")}} | ||
| - {{CSSxRef("scrollbar-color")}} | ||
|
|
||
| ## Accessibility concerns | ||
|
|
||
| When you customize scrollbars, consider they have enough contrast and that their hit area is large enough for people who use touch input. | ||
|
|
||
| - [Baseline Rules for Scrollbar Usability | Adrian Roselli](https://adrianroselli.com/2019/01/baseline-rules-for-scrollbar-usability.html) | ||
| ## Related concepts | ||
|
|
||
| - {{CSSxRef("overflow-block")}} CSS property | ||
| - {{CSSxRef("overflow-inline")}} CSS property | ||
| - {{CSSxRef("overflow-x")}} CSS property | ||
| - {{CSSxRef("overflow-y")}} CSS property | ||
| - {{CSSxRef("overflow")}} CSS shorthand property | ||
| - {{CSSxRef("overflow-clip-margin")}} CSS property | ||
| - {{CSSxRef("scroll-behavior")}} CSS property | ||
| - {{CSSxRef("scrollbar-gutter")}} CSS property | ||
| - {{cssxref("scroll-margin")}} CSS shorthand property | ||
| - {{cssxref("scroll-padding")}} CSS shorthand property | ||
| - {{cssxref("scroll-snap-align")}} CSS property | ||
| - {{cssxref("scroll-snap-stop")}} CSS property | ||
| - {{cssxref("scroll-snap-type")}} CSS property | ||
| - {{CSSxRef("::-webkit-scrollbar")}} pseudo-element | ||
| - {{glossary("scroll container")}} glossary term | ||
| - {{Glossary("scrollport")}} glossary term | ||
| - [`scrollbar`](/en-US/docs/Web/Accessibility/ARIA/Roles/scrollbar_role) ARIA role | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - {{CSSxRef("::-webkit-scrollbar")}} | ||
| - [CSS overflow](/en-US/docs/Web/CSS/CSS_Overflow) module | ||
| - [CSS scroll snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap) module | ||
| - {{cssxref('scroll-timeline-name')}}, {{cssxref('scroll-timeline-axis')}}, and {{cssxref('scroll-timeline')}} |