Search
 
SCRIPT & CODE EXAMPLE
 

CSS

style scroll bar css


/* 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); */
}
Comment

custom scrollbar css

/* transparent scrollbar */
div::-webkit-scrollbar {
  width: 12px;
}

div::-webkit-scrollbar-thumb {
  border: 2px solid #ffffff2f;
  border-radius: 20px;
}
Comment

scrollbar css

<- modern css scrollbar css ->
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
    ::-webkit-scrollbar-track {
    background: transparent; 
  }
    ::-webkit-scrollbar-thumb {
    background: #888; 
      border-radius:10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  } 
Comment

style scrollbar

/* Chrome, safari */
*::-webkit-scrollbar {
	width: 8px;
}

*::-webkit-scrollbar-thumb {
	background-color: gray;
}

/* Firefox */
.selector {
		scrollbar-width: none;
	}
Comment

Custom Scroll Bar CSS

::-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); 
}
Comment

customize scroll bar CSS

  .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; 
  }
Comment

scrollbar css

/* just so you can scroll */
html, body {
  margin: 0;
  padding: 500px;
}

/* actual styles */
body {
  overflow: overlay;
}

.div1 {
  background: grey;
  margin-top: 200px;
  margin-bottom: 20px;
  height: 20px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 200px;
  border: solid 4px transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}
Comment

PREVIOUS NEXT
Code Example
Css :: cmd hash file 
Css :: blur css 
Css :: text overflow ellipsis two lines 
Css :: background color css rgb 
Css :: css grid auto resize on mobile 
Css :: centralize div inside div 
Css :: tailwind border color with gradient 
Css :: roboto google apis 
Css :: css style for the first element only 
Css :: remove accordion space materuail ui css 
Css :: how to make auto scroll to the end in css 
Css :: dont brake text in css 
Css :: css border properties 
Css :: remove border radius select css 
Css :: var minus scss 
Css :: pointer events none and cursor not allowed 
Css :: bootstrap ol 
Css :: add css file to html 
Css :: contenteditable new line 
Css :: css how to remove underline from visited sites 
Css :: how to give text two colors in css 
Css :: set background image and color both 
Css :: create notification badge in css 
Css :: css nth element 
Css :: align div bottom of parent 
Css :: jquery change css variiable value 
Css :: how to center text in css 
Css :: scroll bar with 0 width 
Css :: bootstrap card hover effect 
Css :: rgb green 
ADD CONTENT
Topic
Content
Source link
Name
9+4 =