Breaking News: Grepper is joining You.com. Read the official announcement!

custom scrollbar

Add Answer

Elated Eagle answered on June 19, 2020 Popularity 10/10 Helpfulness 10/10

answer custom scrollbar

related custom scroll bar

related how to customize scrollbar using css

related Custom Scroll Bar CSS

related Css Custom Scrollbar

related custom scrollbar css

related customize scroll bar CSS

related how to customize scrollbar using css

related custom scrollbar css

related Css Custom Scrollbar

custom scrollbar

Comment

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

Popularity 10/10 Helpfulness 10/10 Language css

Source: Grepper

Tags: css scrollbar

Link to this answer
Share Copy Link

Contributed on Jun 19 2020

Elated Eagle

0 Answers Avg Quality 2/10

Closely Related Answers

custom scroll bar

Comment

Modern css scrollbar

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

::-webkit-scrollbar-track {
  background: #ffffff3a;
}

::-webkit-scrollbar-thumb {
  background-color: #ffffff;
  border-radius: 20px;
}

Popularity 9/10 Helpfulness 10/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jun 02 2023

Kio

0 Answers Avg Quality 2/10

how to customize scrollbar using css

Comment

/* Width and height of the scrollbar track */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Background color of the scrollbar track */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* Color of the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

/* Color of the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

Popularity 9/10 Helpfulness 7/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jun 27 2023

Ahmar Hussain

0 Answers Avg Quality 2/10

Custom Scroll Bar CSS

Comment

::-webkit-scrollbar{
    width: 0.9vw;
    background: #777;
}
::-webkit-scrollbar-thumb{
    background: -webkit-linear-gradient(transparent,#30ff00);
    background: linear-gradient(transparent,#30ff00);
    border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover{
   background: -webkit-linear-gradient(transparent,#00c6ff);
   background: linear-gradient(transparent,#00c6ff); 
}

Popularity 10/10 Helpfulness 6/10 Language css

Source: jimfahaddigital.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Aug 18 2022

Morgane Keller

0 Answers Avg Quality 2/10

Css Custom Scrollbar

Comment

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Popularity 10/10 Helpfulness 6/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jul 07 2022

Condemned Cat

0 Answers Avg Quality 2/10

custom scrollbar css

Comment

/* width */
::-webkit-scrollbar {width: 10px;}

/* Track */
::-webkit-scrollbar-track {background: #f1f1f1;}

/* Handle */
::-webkit-scrollbar-thumb {background: #888;}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: #555;}

Popularity 9/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jun 23 2023

Bat Affleck

0 Answers Avg Quality 2/10

customize scroll bar CSS

Comment

  .Class::-webkit-scrollbar {
    width: 2px;
  }
  
  .Class::-webkit-scrollbar-track {
    border-radius: px;
    background: #c9cacc;
  }
  
  .Class::-webkit-scrollbar-track:hover {
    background: #78797a;
  }
  
  .Class::-webkit-scrollbar-thumb {
    background: #3d5585; 
    border-radius: 10px;
  }
  
  .scroll-bar::-webkit-scrollbar-thumb:hover {
    background: #01143b; 
  }

Popularity 10/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jul 31 2022

Astrobois Cosmos

0 Answers Avg Quality 2/10

how to customize scrollbar using css

Comment

/* For Webkit-based browsers (Chrome, Safari, etc.) */

/* Track */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

/* For Firefox */
/* Track */
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;

/* Handle */
scrollbar-color: #888 #f1f1f1;

Popularity 9/10 Helpfulness 5/10 Language css

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

custom scrollbar css

Comment

/* transparent scrollbar */
div::-webkit-scrollbar {
  width: 12px;
  /* if scrollbar is horizontal replace width with height */
}

div::-webkit-scrollbar-thumb {
  border: 2px solid hsla(0, 0%, 50%, 0.1);
  border-radius: 20px;
  /* to remove transparency */
  /* background-color: hsla(0, 0%, 15%, 1.0); */
}

Popularity 10/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Mar 03 2022

shahul

0 Answers Avg Quality 2/10

Css Custom Scrollbar

Comment

-1

body::-webkit-scrollbar {
    @apply w-[10px] bg-[#0b1120];
}
body::-webkit-scrollbar-track {
    @apply bg-slate-200 dark:bg-[#0B1120];
}
body::-webkit-scrollbar-thumb {
    @apply rounded-xl bg-gray-600 dark:bg-slate-700;
}

Popularity 10/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on May 09 2022

Condemned Cat

0 Answers Avg Quality 2/10

custom scrollbar

Contents

More Related Answers

custom scrollbar

Closely Related Answers

custom scroll bar

how to customize scrollbar using css

Custom Scroll Bar CSS

Css Custom Scrollbar

custom scrollbar css

customize scroll bar CSS

how to customize scrollbar using css

custom scrollbar css

Css Custom Scrollbar

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.