What is preventing the scrollbar-color property from being applied directly to the body element?

I've been experimenting with styling my scrollbars using CSS properties, like those described at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars. Interestingly, when I apply these properties directly to the body element with code like body { ... }, they don't seem to take effect. For example:

body {
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
<div style="height: 10000px"></div>

However, if I use a wildcard selector instead, the styles do work:

* {
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
<div style="height: 10000px"></div>

Can anyone explain why this difference occurs? By the way, I'm using the latest version of Firefox on MacOS. Could this be a bug?

cssfirefox

Answer №1

Instead of the body element, it is actually the viewport that is being scrolled. The scrollbar properties defined on the root element (in HTML, the html element) affect the viewport:

html {
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
<div style="height: 10000px"></div>

Applying the CSS to the correct element will make it work properly.

Credit to Alohci for their insightful comment referencing the draft specification for the properties.

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

What could be causing the page to automatically scroll to the bottom upon loading?

My experience with this bootstrap/jquery page in Firefox (v39, latest updates installed) has been unusual as it always seems to jump to the bottom of the page upon clicking. Upon inspecting the code, I couldn't find any JavaScript responsible for thi ...

javascriptjquerycsstwitter-bootstrap

What is the best way to overlay an SVG line on top of a CSS style?

Is there a way to make SVG lines appear on top of CSS-styled elements in my HTML file? I have a white background SVG created with JavaScript using d3, and I am adding CSS-styled rectangles on top of it. However, I also want SVG lines (created with JavaScri ...

javascripthtmlcsssvgd3.js

Conceal overflow content within a Bootstrap btn-group using CSS styling

Suppose I have a table like the one below: /* CSS Styles for the table */ table.my { width: 600px; } table.my > tr { height: 40px; overflow: hidden; } .tag { background: #b8b8b8; padding ...

jqueryhtmlcssangularjstwitter-bootstrap

Is it wise to use the<sup>attribute for mandatory form fields?

Would it be wise to utilize the <sup> tag instead of using margin-top: -xnumberofpx for indicating required fields in a form? <label for="address1" required>Address line 1<sup><img src="/src/images/requiredAsterix.png" width="10" heig ...

csshtmlaccessibility

Hide CSS3 webkit-scrollbar automatically when it's not in use

I need help with customizing scrollbars. How can I hide the scrollbar when it is not needed due to short content? Below is the code snippet I have been working on: .myscroll::-webkit-scrollbar { width: 15px; } .myscroll::-webkit-scrollbar-track ...

csswebkit

Tips for customizing elements using Wordpress

Is there a way to easily make my four divs containing icon images and descriptive text editable in WordPress? I have some experience setting up basics and using widgets in my footer and sidebar, but I'm not sure if that's the best approach for th ...

phphtmlcsswordpress

Issue with background opacity not functioning properly in Internet Explorer 8

I am facing an issue with displaying 2 images in IE8 and IE9. Below is the code snippet causing the problem: .ui-widget-content { border: 0px solid #aaaaaa/*{borderColorContent}*/; background: rgba(0, 0, 0, 0.1) ; /*{bgColorContent}*/ url(images ...

javascriptjquerycssinternet-explorer-8

Customizing CSS according to specific URLs

I have two different domains - one ending with .nl and the other ending with .be. For instance, domain.nl and domain.be. Both domains share a similar overall style, but I want certain elements to have distinct styling depending on whether it is the .nl o ...

javascriptcssurl

Bootstrap allows for the use of video backgrounds, offering the option for borders to be included

Having trouble with a Bootstrap HTML page featuring a video background? The issue is that sometimes the video has borders on the left and right, and occasionally on mobile devices as well. Oddly enough, when the browser (Chrome or Firefox) is refreshed, th ...

javascripthtmlcsstwitter-bootstraphtml5-video

Tips for aligning input elements in the center using HTML and CSS

https://i.sstatic.net/3B7F9.jpg Can someone help me center the input vertically within the image? I'm not sure how to achieve this. .headmenu { background-color: rgb(47, 47, 47); width: auto; height: 30px; } .headmenu-right { float: right ...

htmlcss

Activate a Dropdown Menu by Clicking in a React Application

I have a collapsible feature where you can click to expand or collapse a dropdown. Currently, the dropdown can only be clicked on where the radio button is located. I want the entire area to be clickable so that users can choose the dropdown by clicking an ...

javascripthtmlcssreactjsmaterial-ui

Struggling to eliminate the underlines from an HTML hyperlink

Can someone help me figure out how to remove the annoying underline link that pops up when hovering over an a element in HTML? I attempted adding a style="text-decoration: none" attribute to the a link, but the underline persists when I hover over the text ...

htmlcss

Custom Pug design without any CSS files added

I am having trouble with my .pug template in my express project as it is not including its stylesheets. I have referred to the pug documentation but still can't figure out the issue. Any help would be appreciated! FILE TREE: views `-- index.pug `-- ...

cssexpresspug

Adjust the image to stretch and crop appropriately to perfectly fit the specified dimensions

I have a div with an image inside of it, and the overflow of the div is set to hidden so that the image will be cropped if it exceeds the width or height. It was working correctly, but sometimes it doesn't. What could be causing this issue? Here is th ...

javascriptjqueryhtmlcss

tinyMCE5 has a quirky habit of inserting p tags without warning, but only when using

My editor with tinymce5 works well on Chrome and other browsers, but in Mozilla Firefox each line in the editor gets an additional p tag. I am using it with Angular. Currently, I have initialized the editor like this: <editor name="resultEditor" ...

angularfirefoxtinymcetinymce-5tinymce-3

Blending an HTML jQuery toggle

Is there a way to make the current headline fade out while simultaneously fading in a new one when switching to the next div using a jQuery .html switch? Check out the codepen example: https://codepen.io/balke/pen/JpNNve $(window).scroll(function() { ...

javascriptjqueryhtmlcss

Unable to apply border-radius to a specific HTML table

I am facing an issue where the border-radius is not being displayed on a specific HTML table. I am having difficulty in applying rounded corners to the entire table so that the table edges have a 30px curve. Here is an example of what I am looking for: ht ...

htmlcss

Trouble with Unveiling the Secondary Accordion

I am having issues adding a second accordion next to the existing one. Even though the code is working fine in the tryit editor v3.6 online, it doesn't seem to display correctly for me. I have made sure that I am using the latest versions of all scrip ...

htmlcssbootstrap-4

CSS Float/Clear Challenge (Floating elements conflict)

I divided an image into three parts and aligned them to the right, causing text to wrap around them. Here's a glimpse of the HTML code I used: <img src="" style="float: right;"> <img src="" style="float: right; clear: right;"> <img src ...

css

The pagination styles in Bootstrap are refusing to be overwritten by custom CSS variables

Incorporating Bootstrap version 5.3.3, I have implemented a customized WordPress theme where I have specified a range of color overrides. The custom WordPress theme stylesheet is loaded last, following the Bootstrap stylesheet. At the beginning of my the ...

csswordpressbootstrap-5css-variables