Having trouble with the scrollbar appearance after updating Chrome?

I've encountered an issue with my code after the latest Chrome update. Is there a way to implement cross-browser styling for scrollbars?

// Looking for Scrollbar Styling Solution
const scrollbarStyle = {
  scrollbarColor: `${themeLayers.scrollBar[0]} ${themeLayers.scrollBar[1]}`,
  '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
    backgroundColor: `${themeLayers.scrollBar[1]}`,
    width: 12,
  },
  '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
    borderRadius: 6,
    backgroundColor: `${themeLayers.scrollBar[0]}`,
    minHeight: 24,
    border: `2.5px solid ${themeLayers.scrollBar[1]}`,
  },
  '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
    backgroundColor: `${themeLayers.scrollBar[0]}`,
  },
  '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
    backgroundColor: `${themeLayers.scrollBar[0]}`,
  },
  '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
    backgroundColor: `${themeLayers.scrollBar[0]}`,
  },
  '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
    backgroundColor: `${themeLayers.scrollBar[1]}`,
  },
};

javascriptcssmaterial-ui

Answer №1

Recently, Chrome 121 rolled out an update that introduced support for the `scrollbar-width` and `scrollbar-color` properties. This new feature disables the use of properties like ::-webkit-scrollbar, as mentioned in the MDN Docs.

For more information, check out this MDN note.

To address this issue, it is recommended to enclose the usage of scrollbar-width and scrollbar-color within 

@supports not selector(::-webkit-scrollbar) {}
.

Answer №2

One thing I observed is that the application of scrollbar styles like -webkit-scrollbar-* or scrollbar-* to the body element does not seem to have any effect anymore. It appears that now you need to apply these scrollbar styles to the html tag instead.

Answer №3

Make sure to locate the css properties "scrollbar-width" and "scrollbar-color". Avoid using them in Chrome browser.

You could explore

@supports(-moz-animation-delay: 0) {
 .my-element {
   scrollbar-width: thin;
  }
}

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

Verify the front-end application and authenticate the backend REST API

My project involves developing a REST API and application logic on the client-side, keeping them separate and independent of each other. Now I am looking to implement an authentication system that will automatically authenticate users both on the client-si ...

javascriptrestapiexpress

Properly handling the use of single and double quotation marks in variable declarations within a JavaScript file

I have a search box where users can enter their search text. For example, they can type book, 'book', or "book". The value entered in the search box is then assigned to a variable in the JavaScript file. var searchTerm = "${searchTerm}"; <br/ ...

javascriptjqueryajax

Obtain a URL using JavaScript's regular expressions

Is it possible to use JavaScript regex to fetch the first function parameter? For instance, when I click on a tag in this page element, how can I extract the inline link? Here's an example: <li><a href="#blog" data-rel="clos ...

javascriptjqueryregex

Is it possible to utilize the output of a function to determine the styling of a div element in Vue?

Hi, I'm trying to use the v-bind:style in my div to apply the textposit function with the textpos prop as a parameter. The function should adjust the style of the div based on the value of the parameter. <div class="container" :style=&qu ...

javascriptcssvue.jsvuex

Menu Tabs with Rounded Edges

Seeking help to round the corners of a tabbed dynamic menu using Drupal and the dynamic-persistent-menu module. The code provided below is almost perfect, with 99% accuracy. View the current state of the menu here: . Can anyone assist in achieving the rema ...

cssimagebackground

Incorporate new class into preexisting modules from external library

I am currently working on expanding Phaser by incorporating a new module called Phaser.Physics.Box2D. While Phaser already utilizes this module internally, it is an additional plugin and I am determined to create my own version. TypeScript is the language ...

javascripttypescriptphaser-framework

The CSS styles are not applied when using self.render("example.html") in Tornado/Python

I'm still learning Python and programming in general. I'm currently using Tornado as my web server to host my websites. However, when I try to generate a dynamic html page using self.render("example.html", variables here), the resulting page does ...

pythonhtmlcsstornado

Is Socket.io exclusive to browsers?

Similar Question: Using socket.io standalone without node.js How to run socket.io (client side only) on apache server My website is hosted on a Linux server with shared hosting. Since I don't have the ability to install node.js, I am looking ...

phpjavascriptlinuxnode.jssocket.io

Rows that have been removed from an HTML table remain within the ReactDOM

After diving into JavaScript three months ago, I recently began learning React.js just two days back. While creating a simple TODO app, I noticed that when deleting a row, it disappears from the DOM but not from the React DOM. Can anyone shed some light ...

javascripthtmldomreactjs

Using Javascript to create a new regular expression, we can now read patterns in from

I am currently working on developing a bbcode filtering solution that is compatible with both PHP and JavaScript. Primarily focusing on the JavaScript aspect at the moment, I have encountered an issue with the new RegExp constructor not recognizing pattern ...

javascriptjqueryregexjson

Using regex in javascript to strip HTML tags

I'm trying to clean up my document by removing all HTML tags except for <a>, <img>, and <iframe> using the following code: var regex = "<(?!a )(?!img )(?!iframe )([\s\S]*?)>"; var temp; while (source.match(regex)) { ...

javascripthtmlregex

Issue with Tabulator: The top and bottom calculations do not shift position when a column is toggled. Seeking a solution to toggle a column and refresh the table without losing the current

My main objective is to toggle the visibility of toggles while maintaining consistent formatting. However, I currently face an issue where using a filter achieves this but results in losing the current scroll position of the tabulator, which is not accepta ...

javascriptjquerytabulator

Converting Decimal to RGB Values using JavaScript and PHP

Seeking assistance with converting a decimal value to an RGB value. Here is the formula I am using to compile the decimal value: c = r*(255*255)+g*255+b For instance, rgb(16,120,78) results in 1071078. What is the best way to solve for r, g, and b with ...

javascriptphpdecimalrgb

Using Typescript in React to render font colors with specific styling

Attempting to utilize a variable to set the font color within a react component, encountering an error with my <span>: Type '{ style: "color:yellow"; }' is not assignable to type 'HTMLProps<HTMLSpanElement>' The use of yel ...

javascriptcssreactjstypescriptreact-redux

Invoking a REST API synchronously using JavaScript

I am just starting out with JavaScript and the npm ecosystem. I am attempting to upload data to my REST service using a POST call. The data is being fetched from a CSV file, which is going well so far. For each line of data that is fetched, I convert it as ...

javascriptnode.jsrestnpmsynchronization

Incorporating an external JSX file into an HTML page in a React project

I have a React code in my js/script.js file. My HTML page's head tag is structured like this: <head> <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="06746367657246373328302834" ...

javascripthtmlreactjsgoogle-chrome

Don't forget to expand or collapse

I'm struggling to make this work. My goal is to initially display 50 characters and show the rest when the "read more" button is clicked, and vice versa with "read less." Another problem I've noticed is that when I click the back browser button, ...

javascriptjqueryhtml

Dynamic value in Angular select using ng-initExperience the power of Angular select

When working with Angular, I encountered an issue trying to set a default value for a select box using ng-init from an object that is generated during runtime. Here's the code snippet that's causing me trouble: <select ng-model= ...

javascriptangularjs

Is the IE7 Modal Dialog Misaligned?

Update After some investigation, I discovered the root cause of the problem. In my code, I was referencing the height of the overlay, which resulted in different values in IE7 compared to other browsers. To resolve this issue, I adjusted the code to refe ...

javascriptjquerycssjquery-uimodal-dialog

Tips for modifying color in Material-UI

import { makeStyles } from "@material-ui/core/styles"; const useStayles = makeStyles((theme) => ({ textField: { color: "#4caf50", }, })); <TextField label="Username*" **color="#4caf50"** fu ...

reactjsmaterial-ui