Unable to apply style to scrollbars using css

user_5454419 0
Viewed 62

Currently, I have a scrollbar displaying over part of the page when there is a need for it. enter image description here

I would like to apply styling to the scrollbar such that it doesn't look so bright and I can have the background area of the scrollbar to be transparent. Hence, I tried to apply styling to it. But the scrollbar still seems to be the same. To test if the styling is working, I gave some styles to the scroll based on this article: https://css-tricks.com/almanac/properties/s/scrollbar/

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
    background-color: red;
    outline: 1px solid slategrey;
}

But nothing seems to change. Don't even see those style attributes in developer tools. enter image description here

Is it not possible to apply custom styling to the browser scrollbar ? Also, can I give scrollbar styling to a div element ? or It has to be at the root/body level?

css
2 Answers

Try to also add a ::-webkit-scrollbar, like this

body::-webkit-scrollbar {
    width: 12px;
}

Looks like you also need to add the ::-webkit-scrollbar to make styles work, I do not know the reason for this, and have not found an explanation. But the ::-webkit-scrollbar represent the whole scrollbar. An example:

body {
  width: 300px;
  height: 400px;
}

body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
    background-color: red;
    outline: 1px solid slategrey;
}
<body>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod auctor nulla, et fermentum nisi gravida quis. Phasellus molestie velit felis, nec vestibulum dolor tristique non. Mauris luctus nunc ultricies lacus tristique, at bibendum magna ullamcorper. Phasellus lobortis ut quam vel lacinia. Vestibulum euismod magna eu lacus semper lacinia. Phasellus id neque vel metus vehicula varius quis pellentesque massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut fermentum ex nisi, nec iaculis quam efficitur in. Vivamus pharetra nec velit id placerat.

In id pretium dolor. Nulla facilisi. Sed in faucibus purus, quis convallis lacus. Duis nisl lectus, euismod sagittis euismod ac, tempus quis tortor. In ut dui diam. Integer laoreet metus sed arcu interdum, vitae sagittis magna tristique. Morbi fermentum velit non lectus viverra iaculis. Curabitur ac nulla congue, vehicula quam id, congue tortor. Maecenas porta bibendum mauris, blandit aliquet massa rhoncus in.

Morbi aliquet nunc non dolor consectetur lacinia. Maecenas eu viverra magna. Sed consectetur gravida urna. Aenean eu vehicula mi. Duis a ex tristique lorem mattis molestie. Phasellus eget dolor ex. Nullam congue tortor in lorem lacinia, sit amet condimentum arcu facilisis. Nam quis felis placerat, rhoncus nulla non, accumsan justo. Morbi id placerat nunc. Aenean eleifend nec lacus vitae sodales. Vestibulum eu urna eu elit rhoncus dapibus non vitae ex. Vivamus eget cursus nibh. Vestibulum cursus ipsum diam, vel aliquet leo laoreet eu. Integer hendrerit, purus sed gravida euismod, metus odio aliquam purus, in semper orci urna a ex. Morbi dignissim finibus nisi sed aliquet.

Suspendisse in lectus nec orci tincidunt mattis. Morbi mollis nec nibh a dignissim. Vestibulum mi elit, dictum et posuere id, pharetra consectetur tortor. Suspendisse potenti. Sed suscipit interdum tellus, et gravida ipsum mattis sit amet. Maecenas fermentum non quam eu sollicitudin. Vestibulum sodales mauris ac ipsum fermentum vulputate. Nulla pharetra mattis gravida. Aenean at magna turpis.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque dignissim ultricies quam, ac maximus tortor interdum vel. Quisque eget ultricies ligula. Duis urna augue, ornare ac euismod eu, maximus non augue. Cras eget mi sapien. Nulla tincidunt aliquam lacus in vulputate. Praesent vel feugiat dui. Phasellus tellus erat, malesuada et eleifend in, fringilla eu nisl. Maecenas hendrerit sem quam, congue fermentum arcu tincidunt vel.
</body>

user_60407620

This gives a transparent background on Firefox, Chrome, Edge and Safari.

Edit: It seems that height is needed under ::webkit-scrollbar in order for it to work on chrome using MacOS.

body {
  margin: 0;
  background: grey;
  height: 500px;
  overflow: overlay;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: green transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  height: 10px;
  width: 16px;
}

*::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}

*::-webkit-scrollbar-thumb {
  background-color: green;
  border-radius: 10px;
  border: 3px solid #ffffff;
}
<body/>

user_111491060
Related