WebKit custom scrollbars

Simple WebKit custom scrollbar demo

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 xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a6268'><polygon points='0,50 100,50 50,0'/></svg>");
    }

    ::-webkit-scrollbar-button:vertical:increment {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a6268'><polygon points='0,0 100,0 50,50'/></svg>");
    }

::-webkit-scrollbar-track-piece {
    background: #f8f9fa
}

::-webkit-scrollbar-thumb {
    background: #cce5ff
}