Scrollbar is not showing up and down arrows for chrome browser

Question

I have one div and div is showing verticle scroll. The problem is the scroll is not showing up and down arrows for scrolling in "Chrome" and "Edge" browsers. Please check the below screen shot of the chrome browser-

]1

But up and down arrows are showing in firefox. Please check the below screen shot-

I am working with react application and I found that if we remove the width attribute of webkit-scroollbar it will work for chrome as well. Currently below css is applying over the div element-

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

I tried to override above css but not getting way to remove this 'width' attribute.

Answer 1

You are looking like this code for Chrome. You dont have to use CSS variables, but it helps.

:root {
  --barWidth: 17px;
  --barThumbBgColor: #000;
  --barTrackBgColor: #fff;
}

/* Initial values for scrollbar colors, then changing in JS, is nice and easy */
*::-webkit-scrollbar {
  width: var(--barWidth);
  height: var(--barWidth);
}

*::-webkit-scrollbar-thumb {
  background: var(--barThumbBgColor);
}

*::-webkit-scrollbar-track {
  background: var(--barTrackBgColor);
}

/* Arrows */
::-webkit-scrollbar-button:single-button {
  background-color: var(--barTrackBgColor);
  display: block;
  border-style: solid;
  height: var(--barWidth);
  width: var(--barWidth);
}

/* Up Arrow */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 calc(var(--barWidth) / 2) var(--barWidth) calc(var(--barWidth) / 2);
  border-color: transparent transparent var(--barThumbBgColor) transparent;
}

/* Down Arrow */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: var(--barWidth) calc(var(--barWidth) / 2) 0 calc(var(--barWidth) / 2);
  border-color: var(--barThumbBgColor) transparent transparent transparent;
}

And also this is for Firefox.

body {
   scrollbar-color: red, blue;
}

Then in React you can put this inside useEffect and change colors if u need.

export default function browserTheme(mainColor, contrastColor) {
  const root = document.querySelector(":root")

  // Changes scrollbar color based on selected color.
  // Only works for supported (Chrome, Firefox) desktop browsers.
  root.style.setProperty("scrollbar-color", `#${mainColor} #${contrastColor}`)
  root.style.setProperty("--barThumbBgColor", `#${mainColor}`)
  root.style.setProperty("--barTrackBgColor", `#${contrastColor}`)

  // Changes browser theme color (around address bar, tab buttons) based on selected color.
  // If you like changing scrollbar colors, you will also like this part. Or remove it. (Test it in mobile browsers.)
  // Only works for supported (Chrome, Safari, Samsung, Mi) mobile browsers.
  document.querySelector('meta[name="theme-color"]').setAttribute("content", `#${mainColor}`)
}