Bootstrap Scrollbar Code Example

Example 1: custom scrollbar

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

Example 2: bootstrap overflow hidden

<div class="overflow-auto">...</div> <div class="overflow-hidden">...</div>

Example 3: make a container scrollable bootstrap

.anyClass {   height:150px;   overflow-y: scroll; }

Example 4: custom scrollbar

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