lolv66 ᓚ₍ ^. .^₎'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

my custom scrollbar ! ~

(posting this here cause posting layouts is currently unavailable).. if using, please credit and comment "using" !! > w <




< ------ SCROLLBAR MADE BY @LOLV66 ----- >

::-webkit-scrollbar {
        width: 16px;
        height: 16px;
        }

        ::-webkit-scrollbar-track {
        background-size: 130px;
        background-color: #F8FCFF;
        image-rendering: pixelated;
        border: 1px solid #f19fbb;
-
        }

        ::-webkit-scrollbar-track:active {

        background-size: 130px;
        background-color: #F8FCFF;

        }

        ::-webkit-scrollbar-thumb {
        border: 1px solid #f19fbb;
      
        box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
        width: 16px;
        height: 16px;
        background-color: #ffe6ff;
        z-index: 1;
        }

        ::-webkit-scrollbar-corner {
        background-color: #cccccc;
        }

        ::-webkit-resizer {
        width: 16px;
        height: 16px;
        background-color: #f19fbb;
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
        background-position: bottom right;
        background-repeat: no-repeat;
        image-rendering: pixelated;
        }

        ::-webkit-scrollbar-button,
        .scroll::-webkit-scrollbar-button {
      border: 1px #f19fbb solid;
        box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
        display: block;
        width: 16px;
        height: 16px;
        background-color: #e7f6ff;
        image-rendering: pixelated;
        background-repeat: no-repeat;
        background-position: center center;
        }

        ::-webkit-scrollbar-button:active,
        background-color: #DFEDF6;
        border: 1px #f19fbb solid;
        .scroll::-webkit-scrollbar-button:active {
        background-position: 2px 2px;
        }

        ::-webkit-scrollbar-button:horizontal:decrement,
        .scroll::-webkit-scrollbar-button:horizontal:decrement {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
        }

        ::-webkit-scrollbar-button:horizontal:increment,
        .scroll::-webkit-scrollbar-button:horizontal:increment {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
        }

        ::-webkit-scrollbar-button:vertical:decrement,
        .scroll::-webkit-scrollbar-button:vertical:decrement {
        background-image: url("https://i.postimg.cc/fTh8747q/output-onlinepngtools-2.png");
        }

        ::-webkit-scrollbar-button:vertical:increment,
        .scroll::-webkit-scrollbar-button:vertical:increment {
        background-image: url("https://i.postimg.cc/hPyMkJW6/output-onlinepngtools-3.png");
        }

        ::-webkit-scrollbar-button:horizontal:increment:start,
        .scroll::-webkit-scrollbar-button:horizontal:increment:start {
        display: none;
        }

        ::-webkit-scrollbar-button:horizontal:decrement:end,
        .scroll::-webkit-scrollbar-button:horizontal:decrement:end {
        display: none;
        }

        ::-webkit-scrollbar-button:vertical:increment:start,
        .scroll::-webkit-scrollbar-button:vertical:increment:start {
        display: none;
        }

        ::-webkit-scrollbar-button:vertical:decrement:end,
        .scroll::-webkit-scrollbar-button:vertical:decrement:end {
        display: none;
        }

        ::-webkit-scrollbar-button:active,
        .scroll::-webkit-scrollbar-button:active {
        border: 1px solid #f19fbb;

        box-shadow: none;
        }



14 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )