Creating a Transparent Scrollbar in React for Google Chrome

::-webkit-scrollbar {
  width: 0.5vw;

}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(99, 99, 99);
  border-radius: 10px;
}

I wrote this code to style a scrollbar in CSS. The scrollbar is functioning properly, but I am facing an issue where the track of the scrollbar is not transparent on Chrome.

Here's the problem I'm experiencing: non-transparent track on scrollbar

However, my desired outcome is for the scrollbar track to be transparent like this: expected result

htmlcssreactjsgoogle-chromescrollbar

Answer №1

 In your project where you are using a black theme, transparency will not work. You should use a black color instead of transparent.
 To update your code accordingly, simply make the following changes:

::-webkit-scrollbar {
  width: 0.5vw;
}

::-webkit-scrollbar-track {
  background-color: black; <!--update this line-->
}

::-webkit-scrollbar-thumb {
  background-color: rgb(99, 99, 99);
  border-radius: 10px;
}

}

Answer №2

Could you kindly consider adding !important to the appropriate location when changing only the background? The code appears to be well-structured, resembling your body background.

 ::-webkit-scrollbar-track {
  background-color: transparent !important;
}

If you are using multiple themes, remember to switch themes like this:

.dark{
   background-color: #303030;
 }

 html.dark::-webkit-scrollbar-track {
   background-color: black; // or choose your preferred color :) 
 }

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

"Encountering a 404 error when trying to locate build/app.js while utilizing React with SF6 on

I am new to working with react and I am encountering an issue where my browser cannot reach: public/build/app.js and display a <h1>Hello world</h1> I am using Symfony 6.3 skeleton and have added symfony/webpack-encore-bundle along with symfony ...

reactjsdockerbuildhttp-status-code-404symfony6

Elevation of the specific area in my design

Can someone help me with a height issue I am experiencing? You can find the page in question here: The problem arises when zooming all the way out - the background of the #article div does not extend to the footer. How can I adjust the height of the #art ...

htmlcss

Leveraging API data and dynamic JavaScript variables to establish a constant state in React.js

Struggling to search for a solution, hence the odd title. To give you a better idea, here's an example of what I'm looking for. Essentially, I need help replacing DATEHERE with a variable date that I've already set up. import React, { useSta ...

jsonreactjsapiaxiosreact-hooks

Modify the color of the chosen option in the dropdown menu without affecting the rest of the options

I am facing an issue with dynamic drop down lists in my HTML content. The requirement is to change the color of the selected option to dark red if the option is "success". I have implemented a jQuery function for this purpose. HTML: <select class="rea ...

javascriptjqueryhtml

Stop Autocomplete from changing the value in ReactJS Material UI

Looking for a solution with the Autocomplete component to restrict selection of specific values. Any ideas? const options = ["Option 1", "Option 2", "Option 3"]; const [value, setValue] = React.useState(options[0]); const [in ...

reactjsautocompletematerial-ui

Accessing values from a redux form in a different component

I am currently using Redux-Form version 7.3.0 and encountering an issue with retrieving form values in another component. Despite following the instructions on the Redux Form website, I have been unable to make it work. This is the code for my component: ...

reactjsredux-form

show an HTML webpage within a <div> container using AJAX technology

I am trying to include an HTML page named Introduction.html (located in the same folder as x.html) within div1. However, it does not seem to be loading properly. Below is a snippet of the code from x.html x.html <!DOCTYPE html> <h ...

javascriptjqueryhtmlajaxload

Can a Bootstrap 4 column be designed to have the same height as its width?

Can a Bootstrap 4 column have equal height and width, creating a quadratic design with three columns? Is it feasible to make the first two columns as quadratic dimensions, with the third column matching their height? <div class="row"> <div ...

htmlcssbootstrap-4bootstrap-grid

I am facing some issues with the React ToDoList project

I'm a student trying to create a ToDoList using React. When I try to submit or remove a schedule, nothing happens and the lists are not updated as expected. However, if I type something in the submission box, it works! I can't seem to figure ou ...

javascriptreactjs

The tale of a div's mysterious empty room

Once upon a time, in the world of HTML and CSS, there existed a lonely div. This lonely div longed for companionship, and one day, an inline img came to visit. They formed a bond and became good friends. But, no matter how hard the img tried, it couldn&apo ...

htmlcss

Are there any other options besides using the React Material-UI makeStyles() function for styling class Components?

While experimenting with the makeStyles() function in Material-UI's React library, I encountered a specific error message: The use of hooks is limited to the body of a function component. Below is a snippet of the code that triggered this error: ...

javascriptreactjsmaterial-ui

Tips for aligning a form in the center of a webpage

I have a code snippet using material-ui that I want to center on the page, but it's not working. Can someone please help me fix this issue? Thank you in advance. import React from 'react'; import { makeStyles } from '@material-ui/core ...

cssreactjsmaterial-ui

Chrome has decided to block the cookie

Currently, I am working on setting up a basic register/login form using vuejs on the front end and an express js server with passport library for local and social media strategies. However, I am facing issues with passing cookies to the front end when logg ...

expressgoogle-chromevue.jscookies

Place a single div above two divs in a flexbox container

I am struggling with aligning the fourth div, which has a class of "details", above the second and third div in a flex box layout. Despite my efforts, I have not been successful in achieving this alignment. Can someone please assist me? .flex-container ...

htmlcssflexbox

Challenges Faced when Connecting JavaScript to HTML

This is a snippet of my HTML where I link the .js file <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="CSS/Style.css"> <title> Learning JavaScript </title& ...

javascripthtmlcss

Trouble with concealing <img src> and showing background image on top

I am struggling to hide the <img src="/"> and layer the background image on a 480px media version. Despite attempting to implement the solution provided in this Stack Overflow thread, I have not been successful in achieving the desired outcome. For ...

htmlcssshow-hide

Issue with displaying website monitors

I am facing an issue with my website where it displays differently on various monitors. Below is the HTML and CSS code snippets: HTML <body> <div id="Links"> <a href="About.html"><img src="Slideshow/About.png" width="140em" />< ...

htmlcsslayout

What is the reason that when a <div> click on a mobile device includes a jQuery ('#item').fadeOut() function, the CSS of the '#item' element maintains its previous hover state

While creating a mock back to top button, I encountered an issue with my jQuery call to fadeOut() behaving differently on mobile devices (this discrepancy can be observed using any desktop browser simulator). You can find the source code here: https://cod ...

javascriptjqueryhtmlcssmobile

Input various colored text within an HTML element attribute

In my asp.net project, I am looking to dynamically change the text color of a table cell based on a certain parameter. Here's an example scenario: TableCell dataCell = new TableCell(); foreach (var o in results) { ...

c#htmlcssasp.net

Visible Overflow Causing Issues

When I shrink my browser window horizontally, my logo disappears, especially in mobile phone view. Check out zanifesto.com for more details. I have tried setting the css to overflow:visible, but it still doesn't solve the issue. My objective is to ...

csswordpressresponsive-design