From 42900106291e62d7a2746963b2993aaa8cd9cb21 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 24 Apr 2023 17:34:06 -0700 Subject: [PATCH 01/13] Module landing page: scrollbar styles --- files/en-us/web/css/css_scrollbars/index.md | 32 +++++++++++++++------ 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/css/css_scrollbars/index.md b/files/en-us/web/css/css_scrollbars/index.md index 43b885e4fa6ce8c..ac503568f8f49b9 100644 --- a/files/en-us/web/css/css_scrollbars/index.md +++ b/files/en-us/web/css/css_scrollbars/index.md @@ -1,7 +1,8 @@ --- -title: CSS Scrollbars +title: CSS Scrollbar Styling module 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 @@ -9,9 +10,9 @@ browser-compat: {{CSSRef}} -**CSS Scrollbars** standardizes the obsolete scrollbar color properties introduced in 2000 by Windows IE 5.5. +The **CSS scrollbars styling** module defines properties to influence the visual styling of scrollbars, including controls for their color and width. It standardizes the obsolete scrollbar color properties introduced in 2000 by Windows IE 5.5. -## Basic example +### Scrollbar styling in action In this example, we have chosen to use a thin scrollbar with a green track and purple thumb. @@ -19,7 +20,7 @@ In this example, we have chosen to use a thin scrollbar with a green track and p .scroller { width: 300px; height: 100px; - overflow-y: scroll; + overflow: scroll; scrollbar-color: rebeccapurple green; scrollbar-width: thin; } @@ -28,26 +29,38 @@ In this example, we have chosen to use a thin scrollbar with a green track and p ### HTML ```html -
+

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. -

+

``` ### Result -{{EmbedLiveSample("Basic_Example")}} +{{EmbedLiveSample("Scrollbar styling in action")}} ## Reference -### Properties +### CSS properties - {{CSSxRef("scrollbar-width")}} - {{CSSxRef("scrollbar-color")}} +## 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("::-webkit-scrollbar")}} pseudo-element + ## 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. @@ -64,4 +77,5 @@ When you customize scrollbars, consider they have enough contrast and that their ## See also -- {{CSSxRef("::-webkit-scrollbar")}} +- [CSS overflow module](/en-US/docs/Learn/CSS/CSS_overflow) +- {{Experimental_Inline}} The CSS scroll timeline {{cssxref('scroll-timeline-name')}} and {{cssxref('scroll-timeline-axis')}} properties, along with the {{cssxref('scroll-timeline')}} shorthand, to create animations tied to the scroll offset of a {{glossary("scroll container")}}. From fc6abdd63e3afba14f3b75c95be63e90a372b650 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 24 Apr 2023 19:00:57 -0700 Subject: [PATCH 02/13] Module page: css scrollbar styling --- files/en-us/web/css/css_scrollbars/index.md | 82 +++++++++++++-------- 1 file changed, 51 insertions(+), 31 deletions(-) diff --git a/files/en-us/web/css/css_scrollbars/index.md b/files/en-us/web/css/css_scrollbars/index.md index ac503568f8f49b9..47607f919071429 100644 --- a/files/en-us/web/css/css_scrollbars/index.md +++ b/files/en-us/web/css/css_scrollbars/index.md @@ -3,44 +3,64 @@ title: CSS Scrollbar Styling module 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 --- {{CSSRef}} The **CSS scrollbars styling** module defines properties to influence the visual styling of scrollbars, including controls for their color and width. It standardizes the obsolete scrollbar color properties introduced in 2000 by Windows IE 5.5. -### Scrollbar styling in action +## Scrollbar styling in action -In this example, we have chosen to use a thin scrollbar with a green track and purple thumb. +In this example, we have chosen to use a thin scrollbar with an orange track and red thumb. -```css -.scroller { +```css hidden +.poem { width: 300px; height: 100px; + border: 1px solid; +} +``` + +```css +.poem { overflow: scroll; - scrollbar-color: rebeccapurple green; + scrollbar-color: red orange; scrollbar-width: thin; } ``` -### HTML - -```html -

- 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. -

+```html hidden +
+

A Small Needful Fact

+ 
+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.
+
+

+ - Ross Gay +

+
``` -### Result +{{EmbedLiveSample("Scrollbar_styling_in_action")}} -{{EmbedLiveSample("Scrollbar styling in action")}} +In some browsers you will need to scroll the poem to view the scroll thumbs and hover over the scrollbars to see the track. + +> **Note:** When customizing scrollbars, ensure they have enough contrast and that their hit area is large enough for people who use touch input. See [Baseline Rules for Scrollbar Usability | Adrian Roselli](https://adrianroselli.com/2019/01/baseline-rules-for-scrollbar-usability.html). ## Reference @@ -59,23 +79,23 @@ In this example, we have chosen to use a thin scrollbar with a green track and p - {{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 - -## 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) +- {{glossary("scroll container")}} glossary term +- {{Glossary("scrollport")}} glossary term +- ARIA [`scrollbar`](/en-US/docs/Web/Accessibility/ARIA/Roles/scrollbar_role) role ## Specifications {{Specifications}} -## Browser compatibility - -{{Compat}} - ## See also -- [CSS overflow module](/en-US/docs/Learn/CSS/CSS_overflow) +- [CSS overflow module](/en-US/docs/web/CSS/CSS_overflow) +- [CSS scroll snap module](/en-US/docs/web/CSS/CSS_Scroll_Snap) +- [`@media (forced-colors: active)`](/en-US/docs/Web/CSS/@media/forced-colors) sets {{cssxref("scrollbar-color")}} to 'auto' - {{Experimental_Inline}} The CSS scroll timeline {{cssxref('scroll-timeline-name')}} and {{cssxref('scroll-timeline-axis')}} properties, along with the {{cssxref('scroll-timeline')}} shorthand, to create animations tied to the scroll offset of a {{glossary("scroll container")}}. From 33f619459da3e2af28da7dc2acda4a21184d964e Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 25 Apr 2023 12:01:41 -0700 Subject: [PATCH 03/13] Update files/en-us/web/css/css_scrollbars/index.md Co-authored-by: Dipika Bhattacharya --- files/en-us/web/css/css_scrollbars/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_scrollbars/index.md b/files/en-us/web/css/css_scrollbars/index.md index 47607f919071429..bfb13145a844401 100644 --- a/files/en-us/web/css/css_scrollbars/index.md +++ b/files/en-us/web/css/css_scrollbars/index.md @@ -1,5 +1,5 @@ --- -title: CSS Scrollbar Styling module +title: CSS scrollbars styling slug: Web/CSS/CSS_Scrollbars page-type: css-module spec-urls: https://w3c.github.io/csswg-drafts/css-scrollbars/ From 11499497705a55cb0f18d6708ea7d0a68357e439 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 25 Apr 2023 12:05:12 -0700 Subject: [PATCH 04/13] Apply suggestions from code review Co-authored-by: Dipika Bhattacharya Co-authored-by: Jean-Yves Perrier --- files/en-us/web/css/css_scrollbars/index.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/css/css_scrollbars/index.md b/files/en-us/web/css/css_scrollbars/index.md index bfb13145a844401..5b744048b07adcb 100644 --- a/files/en-us/web/css/css_scrollbars/index.md +++ b/files/en-us/web/css/css_scrollbars/index.md @@ -5,13 +5,13 @@ page-type: css-module spec-urls: https://w3c.github.io/csswg-drafts/css-scrollbars/ --- -{{CSSRef}} +{{CSSRef}}{{SeeCompatTable}} The **CSS scrollbars styling** module defines properties to influence the visual styling of scrollbars, including controls for their color and width. It standardizes the obsolete scrollbar color properties introduced in 2000 by Windows IE 5.5. ## Scrollbar styling in action -In this example, we have chosen to use a thin scrollbar with an orange track and red 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 hidden .poem { @@ -58,9 +58,8 @@ for us to breathe. {{EmbedLiveSample("Scrollbar_styling_in_action")}} -In some browsers you will need to scroll the poem to view the scroll thumbs and hover over the scrollbars to see the track. -> **Note:** When customizing scrollbars, ensure they have enough contrast and that their hit area is large enough for people who use touch input. See [Baseline Rules for Scrollbar Usability | Adrian Roselli](https://adrianroselli.com/2019/01/baseline-rules-for-scrollbar-usability.html). +> **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 @@ -87,7 +86,7 @@ In some browsers you will need to scroll the poem to view the scroll thumbs and - {{CSSxRef("::-webkit-scrollbar")}} pseudo-element - {{glossary("scroll container")}} glossary term - {{Glossary("scrollport")}} glossary term -- ARIA [`scrollbar`](/en-US/docs/Web/Accessibility/ARIA/Roles/scrollbar_role) role +- [`scrollbar`](/en-US/docs/Web/Accessibility/ARIA/Roles/scrollbar_role) ARIA role ## Specifications @@ -95,7 +94,7 @@ In some browsers you will need to scroll the poem to view the scroll thumbs and ## See also -- [CSS overflow module](/en-US/docs/web/CSS/CSS_overflow) -- [CSS scroll snap module](/en-US/docs/web/CSS/CSS_Scroll_Snap) +- [CSS overflow](/en-US/docs/Web/CSS/CSS_Overflow) module +- [CSS scroll snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap) module - [`@media (forced-colors: active)`](/en-US/docs/Web/CSS/@media/forced-colors) sets {{cssxref("scrollbar-color")}} to 'auto' -- {{Experimental_Inline}} The CSS scroll timeline {{cssxref('scroll-timeline-name')}} and {{cssxref('scroll-timeline-axis')}} properties, along with the {{cssxref('scroll-timeline')}} shorthand, to create animations tied to the scroll offset of a {{glossary("scroll container")}}. +- {{{cssxref('scroll-timeline-name')}}, {{cssxref('scroll-timeline-axis')}}, and {{cssxref('scroll-timeline')}} From 7c096256f21003cfc8d09f248d7c6f9a98bebc6f Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 25 Apr 2023 12:20:34 -0700 Subject: [PATCH 05/13] Update files/en-us/web/css/css_scrollbars/index.md Co-authored-by: Dipika Bhattacharya --- files/en-us/web/css/css_scrollbars/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/web/css/css_scrollbars/index.md b/files/en-us/web/css/css_scrollbars/index.md index 5b744048b07adcb..4835883bb490aeb 100644 --- a/files/en-us/web/css/css_scrollbars/index.md +++ b/files/en-us/web/css/css_scrollbars/index.md @@ -96,5 +96,4 @@ for us to breathe. - [CSS overflow](/en-US/docs/Web/CSS/CSS_Overflow) module - [CSS scroll snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap) module -- [`@media (forced-colors: active)`](/en-US/docs/Web/CSS/@media/forced-colors) sets {{cssxref("scrollbar-color")}} to 'auto' - {{{cssxref('scroll-timeline-name')}}, {{cssxref('scroll-timeline-axis')}}, and {{cssxref('scroll-timeline')}} From 8b26ee3c1d77c696ec0a278dc6fbad0282f94241 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 25 Apr 2023 12:21:55 -0700 Subject: [PATCH 06/13] Update files/en-us/web/css/css_scrollbars/index.md --- files/en-us/web/css/css_scrollbars/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_scrollbars/index.md b/files/en-us/web/css/css_scrollbars/index.md index 4835883bb490aeb..4d1bb6ea185d33d 100644 --- a/files/en-us/web/css/css_scrollbars/index.md +++ b/files/en-us/web/css/css_scrollbars/index.md @@ -7,7 +7,7 @@ spec-urls: https://w3c.github.io/csswg-drafts/css-scrollbars/ {{CSSRef}}{{SeeCompatTable}} -The **CSS scrollbars styling** module defines properties to influence the visual styling of scrollbars, including controls for their color and width. It standardizes the obsolete scrollbar color properties introduced in 2000 by Windows IE 5.5. +The **CSS scrollbars styling** module defines properties that provide visual styling of scrollbars, including controls for their color and width. ## Scrollbar styling in action From cbfc5724571c64739f6a541107a29766e79e96d0 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 25 Apr 2023 12:28:44 -0700 Subject: [PATCH 07/13] Update files/en-us/web/css/css_scrollbars/index.md --- files/en-us/web/css/css_scrollbars/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_scrollbars/index.md b/files/en-us/web/css/css_scrollbars/index.md index 4d1bb6ea185d33d..2668382ec019faa 100644 --- a/files/en-us/web/css/css_scrollbars/index.md +++ b/files/en-us/web/css/css_scrollbars/index.md @@ -7,7 +7,7 @@ spec-urls: https://w3c.github.io/csswg-drafts/css-scrollbars/ {{CSSRef}}{{SeeCompatTable}} -The **CSS scrollbars styling** module defines properties that provide visual styling of scrollbars, including controls for their color and width. +The **CSS scrollbars styling** module defines properties that provide visual styling of scrollbars, including controls for the color and width of scrollbar tracks, the background of the scrollbar, and the color of scrollbar thumbs, the draggable handle of the scrollbar. ## Scrollbar styling in action From a5b5e5eb1a0f1f0285e25858ad2e4eb4ba7d378f Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 25 Apr 2023 12:44:15 -0700 Subject: [PATCH 08/13] typo --- files/en-us/web/css/css_scrollbars/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/en-us/web/css/css_scrollbars/index.md b/files/en-us/web/css/css_scrollbars/index.md index 2668382ec019faa..4e0549dc370c300 100644 --- a/files/en-us/web/css/css_scrollbars/index.md +++ b/files/en-us/web/css/css_scrollbars/index.md @@ -58,7 +58,6 @@ for us to breathe. {{EmbedLiveSample("Scrollbar_styling_in_action")}} - > **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 @@ -96,4 +95,4 @@ for us to breathe. - [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')}} +- {{cssxref('scroll-timeline-name')}}, {{cssxref('scroll-timeline-axis')}}, and {{cssxref('scroll-timeline')}} From 60f15fda0be4d7196d24d31cdc2a4c2b6caeb293 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 25 Apr 2023 12:47:21 -0700 Subject: [PATCH 09/13] put compat back in --- files/en-us/web/css/css_scrollbars/index.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/files/en-us/web/css/css_scrollbars/index.md b/files/en-us/web/css/css_scrollbars/index.md index 4e0549dc370c300..5a977709f3d673e 100644 --- a/files/en-us/web/css/css_scrollbars/index.md +++ b/files/en-us/web/css/css_scrollbars/index.md @@ -3,6 +3,9 @@ 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 --- {{CSSRef}}{{SeeCompatTable}} @@ -91,6 +94,10 @@ for us to breathe. {{Specifications}} +## Browser compatibility + +{{Compat}} + ## See also - [CSS overflow](/en-US/docs/Web/CSS/CSS_Overflow) module From f546b6b09828075d151914845aaf2d841acbfd6a Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 25 Apr 2023 12:48:57 -0700 Subject: [PATCH 10/13] put compat back in --- files/en-us/web/css/css_scrollbars/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/web/css/css_scrollbars/index.md b/files/en-us/web/css/css_scrollbars/index.md index 5a977709f3d673e..594940b792dddd0 100644 --- a/files/en-us/web/css/css_scrollbars/index.md +++ b/files/en-us/web/css/css_scrollbars/index.md @@ -4,7 +4,6 @@ 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 --- From a754b44ba759efd9077f99035fac3a6177884a0e Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 26 Apr 2023 11:34:36 -0700 Subject: [PATCH 11/13] Update files/en-us/web/css/css_scrollbars/index.md Co-authored-by: Dipika Bhattacharya --- files/en-us/web/css/css_scrollbars/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_scrollbars/index.md b/files/en-us/web/css/css_scrollbars/index.md index 594940b792dddd0..6a9997c977d64f3 100644 --- a/files/en-us/web/css/css_scrollbars/index.md +++ b/files/en-us/web/css/css_scrollbars/index.md @@ -9,7 +9,7 @@ browser-compat: {{CSSRef}}{{SeeCompatTable}} -The **CSS scrollbars styling** module defines properties that provide visual styling of scrollbars, including controls for the color and width of scrollbar tracks, the background of the scrollbar, and the color of scrollbar thumbs, the draggable handle of the scrollbar. +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. ## Scrollbar styling in action From fefbdc672475ee245a6eac4fc1f20b5c83d59156 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 26 Apr 2023 11:35:30 -0700 Subject: [PATCH 12/13] remove compat --- files/en-us/web/css/css_scrollbars/index.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/files/en-us/web/css/css_scrollbars/index.md b/files/en-us/web/css/css_scrollbars/index.md index 6a9997c977d64f3..4b8c6cf0fce7a33 100644 --- a/files/en-us/web/css/css_scrollbars/index.md +++ b/files/en-us/web/css/css_scrollbars/index.md @@ -5,6 +5,7 @@ page-type: css-module spec-urls: https://w3c.github.io/csswg-drafts/css-scrollbars/ browser-compat: - css.properties.scrollbar-color + - css.properties.scrollbar-width --- {{CSSRef}}{{SeeCompatTable}} @@ -93,10 +94,6 @@ for us to breathe. {{Specifications}} -## Browser compatibility - -{{Compat}} - ## See also - [CSS overflow](/en-US/docs/Web/CSS/CSS_Overflow) module From d1a153bfc0ddb64ddb40409ef89c49add68e292c Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Wed, 26 Apr 2023 16:45:36 -0400 Subject: [PATCH 13/13] fix typo --- files/en-us/web/css/css_scrollbars/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_scrollbars/index.md b/files/en-us/web/css/css_scrollbars/index.md index 4b8c6cf0fce7a33..4fdf64057cc1cab 100644 --- a/files/en-us/web/css/css_scrollbars/index.md +++ b/files/en-us/web/css/css_scrollbars/index.md @@ -10,7 +10,7 @@ browser-compat: {{CSSRef}}{{SeeCompatTable}} -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. +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. ## Scrollbar styling in action