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

css scroll bar design

Add Answer

Readul Ahmed answered on March 3, 2022 Popularity 9/10 Helpfulness 4/10

answer css scroll bar design

related custom scroll bar

related style scroll bar css

related scrollbar design css

related Custom Scroll Bar CSS

related custom scrollbar css

related customize scroll bar CSS

related custom scrollbar css

css scroll bar design

Comment

.table-responsive::-webkit-scrollbar {
    width: 20px;
    height: 15px
    }
    .table-responsive::-webkit-scrollbar-track {
    background-color: #E9EDF1;
    border-radius: 100px;
    box-shadow: 0px 1px 3px gray inset;
    }
    .table-responsive::-webkit-scrollbar-thumb {
    background-image: linear-gradient(180deg, #BD2217 0%, #BD2217 99%);
    box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
    border-radius: 100px;
    }
    .table-responsive {
    scrollbar-width: thin;
    }	

    .table-responsive{
        scrollbar-color: red;
        scrollbar-width: thin;
    }

Popularity 9/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: css scroll

Link to this answer
Share Copy Link

Contributed on Jul 24 2023

Readul Ahmed

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

style scroll bar css

Comment

/* width */
::-webkit-scrollbar {
  width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
  /* border-radius: 5px; */
}
/* Handle */
::-webkit-scrollbar-thumb {
  background:rgba(58, 114, 60, 1);
  /* border-radius: 5px 0 0 5px; */
  /* box-shadow: inset 5px -5px 5px rgba(58, 114, 60, 1); */
}

Popularity 10/10 Helpfulness 8/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Oct 20 2022

Ill Iguana

0 Answers Avg Quality 2/10

scrollbar design css

Comment

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

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

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

/* Styling the scrollbar for Firefox */
/* Requires Gecko 64+ */
scrollbar-color: #888 #f1f1f1; /* thumb color, track color */

/* Styling the scrollbar for Internet Explorer */
/* Requires IE 10+ */
-ms-overflow-style: none; /* hide scrollbar */

element::-ms-scrollbar {
  width: 10px;
}

element::-ms-scrollbar-track {
  background-color: #f1f1f1;
}

element::-ms-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

element::-ms-scrollbar-thumb:hover {
  background-color: #555;
}

Popularity 10/10 Helpfulness 7/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 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

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

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 5/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

custom scrollbar css

Comment

::-webkit-scrollbar {
		width: 8px; /* width of the entire scrollbar */
	}
	::-webkit-scrollbar-track {
		background: none; /* color of the tracking area */
	}
	::-webkit-scrollbar-thumb {
		background-color: gray; /* color of the scroll thumb */
		border-radius: 20px; /* roundness of the scroll thumb */
		border: solid 1px #242424;
	}

Popularity 8/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: css scrollbar scro

Link to this answer
Share Copy Link

Contributed on Nov 13 2023

Bad Beaver

0 Answers Avg Quality 2/10

css scroll bar design

Contents

More Related Answers

css scroll bar design

Closely Related Answers

custom scroll bar

style scroll bar css

scrollbar design css

Custom Scroll Bar CSS

custom scrollbar css

customize scroll bar CSS

custom scrollbar css

custom scrollbar css

Grepper

Documentation

Social

Legal

Contact

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