scrollbar css

Add Answer

Aryamitra Chaudhuri answered on June 4, 2021 Popularity 10/10 Helpfulness 5/10

answer scrollbar css

related style scroll bar css

related style scrollbar

related scrollbar

related scrollbar css

related scrollbar

scrollbar css

Comment

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

Popularity 10/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: css scrollbar

Link to this answer
Share Copy Link

Contributed on May 31 2022

Aryamitra Chaudhuri

0 Answers Avg Quality 2/10

Closely Related Answers

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

style scrollbar

Comment

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

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

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

Popularity 10/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jun 04 2021

Runtime Terror

0 Answers Avg Quality 2/10

scrollbar

Comment

::-webkit-scrollbar {
            width: 20px
        }

        ::-webkit-scrollbar-thumb {
            border: 7px solid transparent;
            background-clip: padding-box;
            border-radius: 9999px;
            background-color: rgba(0, 0, 0, .3)
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, .5)
        }

body {overflow: overlay}

Popularity 10/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Mar 08 2022

Sasuke Khan

0 Answers Avg Quality 2/10

scrollbar css

Comment

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

Popularity 10/10 Helpfulness 3/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jul 15 2022

Poonyapat Pohpon

0 Answers Avg Quality 2/10

scrollbar

Comment

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Popularity 10/10 Helpfulness 3/10 Language css

Source: stackoverflow.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Sep 02 2021

Annoying Antelope

0 Answers Avg Quality 2/10

scrollbar

Comment

scrollbar: default (visible)
scrollbar-hidden: hidden mode (invisible but still scrollable)
scrollbar-auto: auto mode (visible)
scrollbar-width-{spacing}: width of scrollbar
scrollbar-track-{color}: color of track/bar
scrollbar-thumb-{color}: color of thumb/handle
scrollbar-track-radius-{borderRadius}: border radius of track/bar
scrollbar-thumb-{color}: border radius of thumb/handle

then there are variants for above properties such as: hover, color, x, y


/* hover*/
hover:scrollbar-hidden                          /* hidden mode on hover */
hover:scrollbar-auto                            /* auto mode on hover */
hover:scrollbar-width-{spacing}                 /* width of scrollbar on hover */
hover:scrollbar-track-{color}                   /* track/bar color on hover */
hover:scrollbar-thumb-{color}                   /* thumb/handle of the bar color on hover */
hover:scrollbar-track-radius-{borderRadius}     /* radius of track/bar on hover */
hover:scrollbar-thumb-{color}                   /* radius of thumb/handle on hover */


/* hover variant */
hover:scrollbar-width-x-{spacing}               /* width of horizontal bar on hover */
hover:scrollbar-width-y-{spacing}               /* width of vertical bar on hover */
hover:scrollbar-track-x-{color}                 /* color of horizontal track on hover */
hover:scrollbar-track-y-{color}                 /* color of vertical track on hover */
hover:scrollbar-thumb-x-{color}                 /* color of thumb of horizontal bar on hover */
hover:scrollbar-thumb-y-{color}                 /* color of thumb of vertical bar on hover */


/* auto */
scrollbar-auto_width-{spacing}                  /* width when in auto mode */
scrollbar-auto_width-x-{spacing}                /* width of horizontal bar when in auto mode */
scrollbar-auto_width-y-{spacing}                /* width of vertical bar when in auto mode */
scrollbar-auto-track-{color}                    /* color of track when in auto mode */
scrollbar-auto-track-x-{color}                  /* color of horizontal track when in auto mode */
scrollbar-auto-track-y-{color}                  /* color of vertical track when in auto mode */
scrollbar-auto-thumb-{color}                    /* color of thumb when in auto mode */
scrollbar-auto-thumb-x-{color}                  /* color of thumb of horizontal bar when in auto mode */
scrollbar-auto-thumb-y-{color}                  /* color of thumb of vertical bar when in auto mode */

/* auto on hover */
hover:scrollbar-auto_width-{spacing}            /* width when auto on hover */
hover:scrollbar-auto_width-x-{spacing}          /* width of horizontal bar when in auto mode on hover */
hover:scrollbar-auto_width-y-{spacing}          /* width of vertical bar when in auto mode on hover */
hover:scrollbar-auto-track-{color}              /* color of track when in auto mode on hover */
hover:scrollbar-auto-track-x-{color}            /* color of horizontal track when in auto mode on hover */
hover:scrollbar-auto-track-y-{color}            /* color of vertical track when in auto mode on hover */
hover:scrollbar-auto-thumb-{color}              /* color of thumb when in auto mode on hover */
hover:scrollbar-auto-thumb-x-{color}            /* color of thumb of horizontal bar when in auto mode on hover */
hover:scrollbar-auto-thumb-y-{color}            /* color of thumb of vertical bar when in auto mode on hover */

Popularity 10/10 Helpfulness 2/10 Language css

Source: npm.io

Tags: css

Link to this answer
Share Copy Link

Contributed on Dec 21 2021

Wrong Wombat

0 Answers Avg Quality 2/10

scrollbar css

Contents

More Related Answers

scrollbar css

Closely Related Answers

style scroll bar css

style scrollbar

scrollbar

scrollbar css

scrollbar

scrollbar

Grepper

Documentation

Social

Legal

Contact

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