WebKit custom scrollbars

Simple WebKit custom scrollbar demo

by Alexandru Mihai

HTML

<div id="content">
    <p>content filler line 1</p>
    <p>content filler line 2</p>
    <p>content filler line 3</p>
    <p>content filler line 4</p>
    <p>content filler line 5</p>
    <p>content filler line 6</p>
    <p>content filler line 7</p>
    <p>content filler line 8</p>
    <p>content filler line 9</p>
    <p>content filler line 10</p>
    <p>content filler line 11</p>
    <p>content filler line 12</p>
    <p>content filler line 13</p>
    <p>content filler line 14</p>
    <p>content filler line 15</p>
    <p>content filler line 16</p>
    <p>content filler line 17</p>
    <p>content filler line 18</p>
    <p>content filler line 19</p>
    <p>content filler line 20</p>
    <p>content filler line 21</p>
    <p>content filler line 22</p>
    <p>content filler line 23</p>
    <p>content filler line 24</p>
    <p>content filler line 25</p>
    <p>content filler line 26</p>
    <p>content filler line 27</p>
    <p>content filler line 28</p>
    <p>content filler line 29</p>
    <p>content filler line 30</p>
    <p>content filler line 31</p>
    <p>content filler line 32</p>
    <p>content filler line 33</p>
    <p>content filler line 34</p>
    <p>content filler line 35</p>
    <p>content filler line 36</p>
    <p>content filler line 37</p>
    <p>content filler line 38</p>
    <p>content filler line 39</p>
    <p>content filler line 40</p>
    <p>content filler line 41</p>
    <p>content filler line 42</p>
    <p>content filler line 43</p>
    <p>content filler line 44</p>
    <p>content filler line 45</p>
    <p>content filler line 46</p>
    <p>content filler line 47</p>
    <p>content filler line 48</p>
    <p>content filler line 49</p>
    <p>content filler line 50</p>
    <p>content filler line 51</p>
    <p>content filler line 52</p>
    <p>content filler line 53</p>
    <p>content filler line 54</p>
    <p>content filler line 55</p>
    <p>content filler line 56</p>
    <p>content filler line 57</p>
    <p>content filler line 58</p>
    <p>content...

CSS

::-webkit-scrollbar {
    width: 2em;
    height: 2em
}

::-webkit-scrollbar-button {
    background: no-repeat #e9ecef;
    background-size: 0.75em;
    background-position: center bottom;
}

    ::-webkit-scrollbar-button:vertical:decrement {
        background-image: url("data:image/svg+xml;utf8,<svg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g filter='url(#filter0_ddd)''>
<path d='M5 22C5 12.0589 13.0589 4 23 4C32.9411 4 41 12.0589 41 22C41 31.9411 32.9411 40 23 40C13.0589 40 5 31.9411 5 22Z' fill='white'/>
<path d='M18.41 18.295L23 22.875L27.59 18.295L29 19.705L23 25.705L17 19.705L18.41 18.295Z' fill='#191919'/>
</g>
<defs>
<filter id='filter0_ddd' x='0' y='0' width='46' height='46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="2.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="effect2_dropShadow" result="effect3_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
");
    }

    ::-webkit-scrollbar-button:vertical:increment {
       ...