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

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 scrollbar design css

related how to style scrollbar in css

related style scrollbar

related scroll bar css

related scrollbar

related scrollbar css

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

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

how to style scrollbar in css

Comment

/* For Chrome, Safari, and Opera */ 
::-webkit-scrollbar {
  width: 12px; /* Width of the scrollbar */
}

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

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

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

Popularity 9/10 Helpfulness 5/10 Language css

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 11 2023

YOU.com

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

scroll bar css

Comment

.poem {
  overflow: scroll;
  scrollbar-color: red orange;
  scrollbar-width: thin;
}

Popularity 9/10 Helpfulness 4/10 Language css

Source: developer.mozilla.org

Tags: css

Link to this answer
Share Copy Link

Contributed on Jul 27 2023

Chea Keo

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

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 css

Comment

-1

/* 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 css

Comment

body {
  --sb-track-color: #232E33;
  --sb-thumb-color: #6BAF8D;
  --sb-size: 10px;

  scrollbar-color: var(--sb-thumb-color) 
                   var(--sb-track-color);
}

body::-webkit-scrollbar {
  width: var(--sb-size);
}

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 10px;
}

Popularity 8/10 Helpfulness 3/10 Language css

Source: scrollbar.app

Tags: css scrollbar sc

Link to this answer
Share Copy Link

Contributed on Jan 15 2024

Corentin

0 Answers Avg Quality 2/10

scrollbar css

Contents

More Related Answers

scrollbar css

Closely Related Answers

style scroll bar css

scrollbar design css

how to style scrollbar in css

style scrollbar

scroll bar css

scrollbar

scrollbar

scrollbar css

scrollbar css

Grepper

Documentation

Social

Legal

Contact

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