Custom Scrollbar Styling

0
Hello everyone, I have a vertical scrollbar in the page,It’s a default one.I want to design custom scrollbar with style.How can I achieve this? Thank you,
asked
3 answers
3

Hi Shaik,

you can try to style scrollbars directly with browser-specific CSS. But be aware that these parts of CSS are experimental and not standardized. However, it should work in most browsers.

Check these links for more information:

Firefox

Webkit based browsers (Chrome, Edge, Safari)

Internet Explorer

answered
0

Hello,

Here is some css I used in my custom.css file for custom styled scrollbar, feel free it edit it to your desired look:

 

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}

body::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}

 

answered
0

Where I can find custom.css file.Help me

Thank you

answered