Having difficulty styling scrollbars using CSS

There is currently a scrollbar displaying over part of my page when necessary. https://i.stack.imgur.com/48Rbx.png

I want to change the styling of the scrollbar to make it less bright and have a transparent background. I attempted to apply some styles, but the scrollbar remains unchanged. To test if the styling was working, I followed the instructions in 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;
}

However, there were no visible changes. I also couldn't see those style attributes in the developer tools. https://i.stack.imgur.com/0Q6RJ.png

Is it not possible to customize the browser scrollbar? Can scrollbar styling be applied to a div element or does it have to be at the root/body level?

css

Answer №1

This code snippet creates a transparent background for scrollbars in Firefox, Chrome, Edge, and Safari.

Note: If you are using MacOS with chrome, make sure to include the height property under ::webkit-scrollbar for it to work properly.

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

Answer №2

Make sure to include ::-webkit-scrollbar in your stylesheets, like this:

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

You also need to add the ::-webkit-scrollbar for the styles to take effect. The reason behind this requirement is unclear, and no explanation has been found so far. However, ::-webkit-scrollbar represents the entire scrollbar. Here's 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display an additional div when hovering over form input

I am currently in the process of designing a search bar animation. Specifically, I want the search history to appear when hovering over the search bar. However, I am facing an issue where the code doesn't seem to work when I use .search-bar-input:hove ...

htmlcss

Issues with alignment within Bootstrap grid system

I have three unique "cards" that I want to display horizontally and center on the page without using the bootstrap card class. Currently, I am attempting to assign each of them a width of .col-lg-4 within an outer div set to full width. However, they are s ...

csstwitter-bootstrap

Issue with Tailwind CSS table header alignment not properly aligning to the right

Currently, I am facing an issue with tailwindcss where the headers in my table are not following the text-right / text-left / text-center directives. If you want to see the problem yourself, here's a link to the fiddle: https://jsfiddle.net/3u2jgqoc/ ...

htmlcsstailwind-csstext-alignment

jQuery code unable to alter the class of a div

Need help with a script on my single page site that adds a "read more" style link to a content area's div. The goal is for the button to change the class of the content area when clicked, showing all of the content. Clicking again should hide the cont ...

javascriptjqueryhtmlcss

How can I create a responsive input group with automatic width using Bootstrap 3.1?

I am having trouble with the layout of my two floating divs. The first div contains buttons and the second div contains an input-group. However, the input-group is moving down a line instead of utilizing the available space. Here is a link for reference: ...

htmlcsstwitter-bootstrap

Setting row heights based on text in a chosen column within Excel

Hey there, I'm currently using Java code to generate a report in Excel. I've managed to set the height of rows and width of columns, but I've run into an issue where some data in a column is too large and affecting the height of other column ...

javahtmlcssexcel

Adding a pathway to a clip path: a step-by-step guide

While attempting to create a wave effect on an image, I hit a roadblock. There are two SVGs involved - one with the path I want to use and the other behaving as expected but with the wrong clip path/shape. However, when I try to insert the desired path, ...

cssimagesvg

Determine whether there is greater available space above or below a specific element within the DOM

I'm looking to create a dynamic layout where an input field is accompanied by a list in a div, positioned either above or below depending on available space. This setup needs to account for the fact that the input field could be located anywhere on th ...

htmlcssangularjstypescript

The unequal division of space between two flexed child divs is caused by varying image sizes

In my parent container, I have set the display property to flex. Inside, there are two divs with both having flex:1 set. However, the first child div contains an image and takes up twice as much space as the second div. If the screen is 1000px in height, ...

htmlcss

What could be causing the issue of CSS animation not functioning properly when used in conjunction with a

I am working on creating a switch button with CSS and JavaScript that needs an animation when toggling or clicked. The only issue I am facing is related to the animation. I am wondering if there might be any problem with the positioning (relative, absol ...

javascripthtmlcss

Fade out the div element when clicked

For my game project, I needed a way to make a div fade out after an onclick event. However, the issue I encountered was that after fading out, the div would reappear. Ideally, I wanted it to simply disappear without any sort of fade effect. Below is the co ...

javascripthtmlcssonclick

Forming a space between borders

I'm attempting to create a space within a div's border that can accommodate an image, much like so: Is there a method to achieve this using only CSS? The only solution I have found is: .box { background: url(img.png) bottom left; border ...

cssimageborder

Building modals with Bootstrap

Currently, my website is built using Bootstrap, JQuery, HTML, and CSS. I am looking to enhance the user experience by incorporating a modal output feature. The idea is that when a user clicks on a specific hyperlink, a modal window will open displaying t ...

jqueryhtmlcssbootstrap-modalsimplemodal

Dealing with a divided image in a separate thread: What you need to know

I am facing a challenge with incorporating a LARGE image into a website, which is affecting performance. My solution is to divide the image into smaller pieces and stitch them together using a grid upon loading. The only issue is that it must be in the ba ...

htmlimagecsscss-grid

Is there a way to create an effect where the color of a floating action button changes when you hover over it, similar to a filter?

I'm new to using the <Fab /> element and I'm struggling to figure out how to implement a hover effect that will change the button's color. Here's what I have so far: JavaScript: <Fab variant="extended" className=&quo ...

javascriptcssmaterial-ui

Struggling to create a flawless gradient fade transition

Looking to create a gradient overlay on my images for a specific effect: The goal is to have the gradient darker at the bottom, while leaving the top unaffected by the darkness. I attempted the following code: @include linear-gradient(to top, rgba(0,0,0 ...

csslinear-gradients

Tips on transitioning from Modal1 to Modal2 in Ionic after a successful submit button press?

My survey app requires users to fill out a form and click the Submit Feedback button. Upon successful submission, a message saying "Feedback submitted successfully" should be displayed in Modal2, which is inside another modal named (Modal1). However, being ...

javascriptcssangularionic-frameworkmodal-dialog

What are the steps to create a CSS grid like this?

Any suggestions on how to create a grid template similar to the image shown in this picture? I am looking to achieve this design without rounded borders and without any gaps between the elements. ...

htmlcssgridcss-grid

Issue with negative z-index in modal window has not been resolved

I'm currently trying to customize the radio button using my own CSS styles, but I've encountered an issue. For some reason, setting the z-index to -1 is not working when the radio button is within a modal. Below is the code snippet that I am wor ...

javascripthtmlcss

Encountering a problem creating a hover overlay effect on a transparent PNG image within a parent div that has a background color

I'm struggling with creating an overlay hover effect on an image that has transparency. The issue I'm facing is that the black background of the parent div element is filling in the transparent parts of the PNG image, making it look like those ar ...

htmlcsspngoverlaytransparency