From a3425696c38588e0f600dd68b5fcbc95dbf3676a Mon Sep 17 00:00:00 2001 From: Mattia Astorino Date: Wed, 28 Feb 2018 20:02:06 +0100 Subject: [PATCH 1/4] feat: Add scrollbars-styling --- index.html | 71 +++++++++++++++++++++++++++++++ snippets/scrollbars-styling.md | 78 ++++++++++++++++++++++++++++++++++ 2 files changed, 149 insertions(+) create mode 100644 snippets/scrollbars-styling.md diff --git a/index.html b/index.html index b6f6d0214..c64d578b8 100644 --- a/index.html +++ b/index.html @@ -31,6 +31,7 @@ Overflow scroll gradient Popout menu Pretty text underline + Scrollbars styling Shape separator System font stack Triangle @@ -918,6 +919,76 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop +
+

Scrollbars styling

+

Customise scrollbars style for the document and elements with overflow scrollable, on webkit platforms.

+

HTML

<div class="custom-scroll">
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
+</div>
+
+

CSS

::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
+}
+
+

Demo

+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit? +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit? +

+
+
+ +

Explanation

+
    +
  1. ::-webkit-scrollbar target the whole scrollbar element.
    2. +
  2. ::-webkit-scrollbar-track target only the scrollbar track.
    3. +
  3. ::-webkit-scrollbar-thumb Allow you to target and style the scrollbar thumb.
    4. +
+

There are many other pseudo elements that you can use to style scrollbars. More info about this on the + WebKit Blog +

+

Browser support

+
+
+ 87.3% +
+
+

⚠️ Currently scrollbar styling doesn't appear to be on any standards track. +

+ +

Shape separator

Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.

diff --git a/snippets/scrollbars-styling.md b/snippets/scrollbars-styling.md new file mode 100644 index 000000000..f4da38705 --- /dev/null +++ b/snippets/scrollbars-styling.md @@ -0,0 +1,78 @@ +### Scrollbars styling + +Customise scrollbars style for the document and elements with overflow scrollable, on webkit platforms. + +#### HTML + +```html +
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?

+
+``` + +#### CSS + +```css +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + border-radius: 10px; +} + +::-webkit-scrollbar-thumb { + border-radius: 10px; + box-shadow: inset 0 0 6px rgba(0,0,0,0.5); +} +``` + +#### Demo + +
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit? +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit? +

+
+
+ + + +#### Explanation + +1. `::-webkit-scrollbar` target the whole scrollbar element. +2. `::-webkit-scrollbar-track` target only the scrollbar track. +3. `::-webkit-scrollbar-thumb` Allow you to target and style the scrollbar thumb. + +There are many other pseudo elements that you can use to style scrollbars. More info about this on the [WebKit Blog](https://webkit.org/blog/363/styling-scrollbars/) + +#### Browser support + +⚠️ Currently scrollbar styling doesn't appear to be on any standards track. + + +* https://caniuse.com/#feat=css-scrollbar From 46eb9fbbefe8bf1d196db869bea4215c5f353570 Mon Sep 17 00:00:00 2001 From: Mattia Astorino Date: Wed, 28 Feb 2018 20:55:39 +0100 Subject: [PATCH 2/4] chore: reset builded index.html --- index.html | 73 +----------------------------------------------------- 1 file changed, 1 insertion(+), 72 deletions(-) diff --git a/index.html b/index.html index c64d578b8..ae459f380 100644 --- a/index.html +++ b/index.html @@ -31,7 +31,6 @@ Overflow scroll gradient Popout menu Pretty text underline - Scrollbars styling Shape separator System font stack Triangle @@ -919,76 +918,6 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
-
-

Scrollbars styling

-

Customise scrollbars style for the document and elements with overflow scrollable, on webkit platforms.

-

HTML

<div class="custom-scroll">
-  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
-</div>
-
-

CSS

::-webkit-scrollbar {
-  width: 8px;
-}
-::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-  border-radius: 10px;
-}
-::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
-}
-
-

Demo

-
-
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit? -

-
-
- -

Explanation

-
    -
  1. ::-webkit-scrollbar target the whole scrollbar element.
    2. -
  2. ::-webkit-scrollbar-track target only the scrollbar track.
    3. -
  3. ::-webkit-scrollbar-thumb Allow you to target and style the scrollbar thumb.
    4. -
-

There are many other pseudo elements that you can use to style scrollbars. More info about this on the - WebKit Blog -

-

Browser support

-
-
- 87.3% -
-
-

⚠️ Currently scrollbar styling doesn't appear to be on any standards track. -

- -

Shape separator

Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.

@@ -1213,4 +1142,4 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
- + \ No newline at end of file From 6cbeabcb34d01210921eb4ced6b13476bf802c2c Mon Sep 17 00:00:00 2001 From: atomiks Date: Thu, 1 Mar 2018 18:34:55 +1000 Subject: [PATCH 3/4] Update and rename scrollbars-styling.md to custom-scrollbar.md --- ...ollbars-styling.md => custom-scrollbar.md} | 31 +++++++++---------- 1 file changed, 15 insertions(+), 16 deletions(-) rename snippets/{scrollbars-styling.md => custom-scrollbar.md} (55%) diff --git a/snippets/scrollbars-styling.md b/snippets/custom-scrollbar.md similarity index 55% rename from snippets/scrollbars-styling.md rename to snippets/custom-scrollbar.md index f4da38705..a29116581 100644 --- a/snippets/scrollbars-styling.md +++ b/snippets/custom-scrollbar.md @@ -1,11 +1,11 @@ -### Scrollbars styling +### Custom scrollbar -Customise scrollbars style for the document and elements with overflow scrollable, on webkit platforms. +Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms. #### HTML ```html -
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?

``` @@ -31,7 +31,7 @@ Customise scrollbars style for the document and elements with overflow scrollabl #### Demo
-
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?

@@ -42,37 +42,36 @@ Customise scrollbars style for the document and elements with overflow scrollabl
#### Explanation -1. `::-webkit-scrollbar` target the whole scrollbar element. -2. `::-webkit-scrollbar-track` target only the scrollbar track. -3. `::-webkit-scrollbar-thumb` Allow you to target and style the scrollbar thumb. +1. `::-webkit-scrollbar` targets the whole scrollbar element. +2. `::-webkit-scrollbar-track` targets only the scrollbar track. +3. `::-webkit-scrollbar-thumb` targets the scrollbar thumb. -There are many other pseudo elements that you can use to style scrollbars. More info about this on the [WebKit Blog](https://webkit.org/blog/363/styling-scrollbars/) +There are many other pseudo-elements that you can use to style scrollbars. For more info, visit the [WebKit Blog](https://webkit.org/blog/363/styling-scrollbars/) #### Browser support -⚠️ Currently scrollbar styling doesn't appear to be on any standards track. - +⚠️ Scrollbar styling doesn't appear to be on any standards track. * https://caniuse.com/#feat=css-scrollbar From 8d548de4012e137498dcaf998951ff0289be1f82 Mon Sep 17 00:00:00 2001 From: atomiks Date: Thu, 1 Mar 2018 18:41:26 +1000 Subject: [PATCH 4/4] Specify difference between document & scrollable div --- snippets/custom-scrollbar.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/snippets/custom-scrollbar.md b/snippets/custom-scrollbar.md index a29116581..b63cc00ae 100644 --- a/snippets/custom-scrollbar.md +++ b/snippets/custom-scrollbar.md @@ -13,6 +13,7 @@ Customizes the scrollbar style for the document and elements with scrollable ove #### CSS ```css +/* Document scrollbar */ ::-webkit-scrollbar { width: 8px; } @@ -26,6 +27,10 @@ Customizes the scrollbar style for the document and elements with scrollable ove border-radius: 10px; box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } + +/* Scrollable element */ +.some-element::webkit-scrollbar { +} ``` #### Demo