All Languages >> CSS >> custom scroll bar

“custom scroll bar” Code Answer’s

custom scrollbar

css by Elated Eagle on Jun 19 2020 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 */
}

custom scroll bar

css by L

on May 26 2020 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; 
}

customize scrollbar css

css by Kami on Jan 06 2021 Comment

// scroll bar
/* width */
::-webkit-scrollbar {
  background-color: hsl(235, 24%, 19%);
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: hsla(235, 21%, 11%, 0.322);
  box-shadow: 0 0 3px hsl(235, 21%, 11%);
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: hsl(235, 21%, 11%);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: hsl(220, 98%, 61%);
}

custom scrollbar

css by David

on Mar 06 2020 Comment

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }


/* Different States */
:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive


/* All toghether example */
::-webkit-scrollbar-track-piece:start {
   /* Select the top half (or left half) or scrollbar track individually */
}

::-webkit-scrollbar-thumb:window-inactive {
   /* Select the thumb when the browser window isn't in focus */
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
   /* Select the down or left scroll button when it's being hovered by the mouse */
}


/* Example */
body::-webkit-scrollbar {
    width: 1em;
}
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

custom scrollbar

css by Real Rattlesnake on Sep 01 2021 Comment

  body::-webkit-scrollbar {
    width: 12px;
}
body::-webkit-scrollbar-thumb {
    background: #ff9c44;
    border-radius: 6px;
}

by moheen

Add a Grepper Answer

CSS answers related to “custom scroll bar”

CSS queries related to “custom scroll bar”

Browse CSS Answers by Framework

More “Kinda” Related CSS Answers View All CSS Answers »

Browse Popular Code Answers by Language

Browse Other Code Languages

“custom scroll bar” Code Answer’s

CSS answers related to “custom scroll bar”

CSS queries related to “custom scroll bar”

Browse CSS Answers by Framework

More “Kinda” Related CSS Answers View All CSS Answers »

Browse Popular Code Answers by Language

SQL

Shell/Bash

Swift

Javascript

VBA

CSS

TypeScript

Lua

Kotlin

C++

Matlab

C

Go

Python

PHP

R

Ruby

Rust

Java

C#

Dart

Html

Assembly

BASIC

Perl

Delphi

Objective-C

Pascal

Scala

Haskell

ActionScript

Fortran

Elixir

Groovy

Clojure

Julia

Erlang

Abap

Scheme

Browse Other Code Languages

Grepper

Documentation

Social

Legal

Contact

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