CSS3 custom scrollbar style & Actual - WebKit-ScrollBar

preface

Webkit supports custom styles for fields with Overflow attributes, list boxes, drop-down menus, and textarea scroll bars, so it’s quite useful. Of course, a scrollbar style compatible with all browsers does not currently exist.

demo

Take a look at these two scrollbar demos:

www.xuanfengge.com/demo/201311…

Scrollbar composition

::-webkit- scrollBar The entire part of the scrollbar
::-webkit-scrollbar- Thumb Small square inside the scrollbar that can be moved up and down (or left and right depending on whether it’s vertical or horizontal)
::-webkit-scrollbar-track: webkit-scrollbar-track: webkit-scrollbar-track
::- webkit-Scrollbar-button Buttons at both ends of the scrollbar track that allow fine tuning of the position of the small square by clicking.
::-webkit-scrollbar-track-piece Inner track, middle part of scrollbar (except)
::-webkit-scrollbar-corner ::-webkit-scrollbar-corner ::-webkit-scrollbar-corner
::-webkit-resizer Small control used to resize elements by dragging at the intersection of two scroll bars

The second demo style

/* Define the size of the scrollbar */ :-webkit-scrollbar {width: 16px; height: 16px; background-color: #F5F5F5; } /* Define scrollbar inner shadow + rounded corner */ :-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } /* Define slider inner shadow + rounded corner */ ::-webkit-scrollbar-thumb {border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; }Copy the code

Actual combat – 1

<div class="test test-1">
  <div class="scrollbar"></div>
</div>
Copy the code

.test { width : 50px; height : 200px; overflow: auto; float : left; margin : 5px; border : none; } .scrollbar { width : 30px; height: 300px; margin: 0 auto; }.test-1::-webkit-scrollbar {/* width: 10px; /* Height: 1px; }. Test-1 ::-webkit-scrollbar-thumb {/* border-radius: 10px; Box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background : #535353; }. Test-1 ::-webkit-scrollbar-track {/* scrollbar-track */ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; background : #ededed; }Copy the code

-webkit-scrollbar-track{… -webkit-scrollbar-track{… }

The effect is as follows:

Actual combat – 2

<div class="test test-2">
   <div class="scrollbar"></div>
</div>
Copy the code

.test-2::-webkit-scrollbar {/* width: 10px; /* Height: 1px; }. Test-2 ::-webkit-scrollbar-thumb {/* border-radius: 10px; background-color: skyblue; background-image: -webkit-Linear-gradient (45deg, rgba(255, 255, 255, 0.2) transparent 25%, transparent 50%, rgba(255, 255, 255, 255) transparent 25%, transparent 50%, rgba(255, 255, 255, 255) Rgba (255, 255, 255, 0.2) 75X transparent 75X transparent); }. Test-2 ::-webkit-scrollbar-track {/* scrollbar-track */ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background : #ededed; border-radius: 10px; }Copy the code

The preview looks like this:

Click the card below/wechat search, follow the public account “Tianyu Creative Music” (ID: GH_CC865e4C536b)

I heard that praise and attention to this number have found a beautiful little sister yo and after the year will enter a million ah!!

Phase to recommend

[

Vue is similar to the new library VueUse from hooks