ساخت اسکرول بار آنلاین – scrollbar generator

Custom Scrollbar Maker

Instructions

Use the below controls to customize the browser's scrollbar and then copy the css to use in your own websites!

Note - I recommend trying out on different browsers to see how your scrollbar will be styled elsewhere.

Controls

  • (Firefox only)
  • px
  • px
  • px

Scroll me...

Sometimes, the content of an element is bigger than the element itself, but you still want people to be able to see all of it, so you set the css of the element to overflow: scroll to add a scrollbar to it.

Then, to your horror, an ugly grey scrollbar is added to your page, which totally ruins the themeing you've worked so hard on, so what can you do?

Well... It turns out that many modern browsers have pseudo element selectors that you can use to style the scrollbars on your page, and seeing as it can be a bit of a pain reloading a page again and again to see what each one does, I figured why not make a simple little pen to let you style scrollbars live in the browser, and then copy the code to your own website once you're done.

A cute pug

Hey there, don't mind me. I'm just chilling down here.

Copy This Code

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: blue orange;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 12px;
  }

  *::-webkit-scrollbar-track {
    background: orange;
  }

  *::-webkit-scrollbar-thumb {
    background-color: blue;
    border-radius: 20px;
    border: 3px solid orange;
  }

Debugger

Posted in Uncategorized

Write a comment