Is there a solution to style scrollbars globally

0 votes
I came across an article about decorating scrollbars with Vue and Vuetify that says: "There is one disadvantage to this technique. We can't apply the style to all components at once."

I wonder if there is a solution to style all scrollbars globally?
May 31 in CSS by Edureka
• 9,940 points
18 views

1 answer to this question.

0 votes

The -webkit-scrollbar family of properties consists of seven different pseudo-elements that, together, comprise a full scrollbar UI element:

  1. ::-webkit-scrollbar addresses the background of the bar itself. It is usually covered by the other elements

  2. ::-webkit-scrollbar-button addresses the directional buttons on the scrollbar

  3. ::-webkit-scrollbar-track addresses the empty space “below” the progress bar

  4. ::-webkit-scrollbar-track-piece is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb)

  5. ::-webkit-scrollbar-thumb addresses the draggable scrolling element that resizes depending on the size of the scrollable element

  6. ::-webkit-scrollbar-corner addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet

  7. ::-webkit-resizer addresses the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements

answered Jun 10 by Edureka
• 9,540 points

Related Questions In CSS

0 votes
0 answers

Is there a way to link in a stylesheet where the extension is not .css?

When I dynamically connect in the CSS ...READ MORE

Aug 8 in CSS by Edureka
• 9,940 points
33 views
0 votes
1 answer

What is the proper way to display a logo with CSS?

An <img> element is the proper way ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
30 views
0 votes
1 answer

How to style a checkbox using CSS?

Add focus outline input[type="checkbox"]:focus + span:before { ...READ MORE

answered Jun 21 in CSS by Edureka
• 9,540 points
18 views
0 votes
1 answer

Is there a CSS selector for elements containing certain text?

You'd need to add a data attribute ...READ MORE

answered Aug 5 in CSS by Tanishqa
• 700 points
10 views
0 votes
0 answers

Issue with Open Graph tags and Nuxt.js (prod?)

I integrated OpenGraph tags into my Nuxt.js ...READ MORE

Mar 10 in Digital Marketing by Kichu
• 19,040 points
525 views
0 votes
0 answers

How to get Stack Overflow SEO friendly URL structure in Nuxt.js?

Stack Overflow has the following URL structure ...READ MORE

Mar 10 in Digital Marketing by Kichu
• 19,040 points
318 views
0 votes
1 answer

Adding public contact from request to aws

Third one seems to be the best ...READ MORE

answered Jun 28, 2018 in DevOps on Cloud by DareDev
• 6,890 points
194 views
0 votes
1 answer

Is there any way to colorize a white PNG image with CSS only?

Filters can be used with -webkit-filter and ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
76 views
0 votes
1 answer

Is there any way to animate an ellipsis with CSS animations?

You might try to time each ellipsis ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
64 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP