Help fix auto hide scroll bar issue



  • I have managed to put together an auto hide regular scrollbar script, the script works as intended except for one issue, hovering over the thumb element, makes both the thumb and the track elements visible, but hovering over the track element only makes the track element visible, the thumb element remains invisible.

    How can I make both the track element and the thumb element become visible by hovering on the track element?

    .css:

    ::-webkit-scrollbar {
        height: 10px!important;
        width: 10px!important;
    }
    
    ::-webkit-scrollbar-track {
        background: var(--colorBg);
    }
    
    ::-webkit-scrollbar-track:hover {
        background:rgba(0,0,0,0.1);
    }
    
    ::-webkit-scrollbar-thumb {
        background: var(--colorBg);
    }
      
    ::-webkit-scrollbar-thumb:hover {
        border-radius:5px;
        background:rgba(150,50,80,0.5);
    }
    

    .json:

    {
        "name": "Vivaldi custom scrollbar",
        "content_scripts": [
            {
              "matches": ["*://*/*"],
              "css": ["Custom.css"]
            }
        ],
        "version": "1.0.0",
        "description": "Vivaldi custom scrollbar",
        "manifest_version": 2
    }
    
    

    Regards
    raed



  • Searching for a workaround for my issue, I came across this peice of code which makes the track bar appear thinner than the thumb:

    /* SCROLLBAR */
    /* Let's get this party started */
    ::-webkit-scrollbar {
        width: 10px;
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
        background: rgb(0,0,0);
        border: 4px solid transparent;
        background-clip: content-box;   /* THIS IS IMPORTANT */
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: rgb(25,25,25);
        border: 1px solid rgb(0,0,0);
    }
    

    I have managed to adapt the above code to make the thumb become larger on mouse over:

    /*Scrollbar*/
    ::-webkit-scrollbar {
        width:15px;
        height:15px;
    }
    
    /*Track*/
    ::-webkit-scrollbar-track {
        background: rgba(119, 119, 119,0.4);
        border: 7px solid transparent;
        background-clip: content-box;
    }
    
    /*Handle*/
    ::-webkit-scrollbar-thumb {
        background: rgba(119, 119, 119,0.6);
        border-radius: 2px;
        border: 5px solid transparent;
        background-clip: content-box;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(119, 119, 119,0.8);
        border-radius: 2px;
        border: 2px solid transparent;
        background-clip: content-box;
    }
    
    ::-webkit-scrollbar-thumb:active {
        background: rgba(119, 119, 119,1);
        border-radius: 2px;
        border: 1px solid transparent;
        background-clip: content-box;
    }
    
    /*Corner*/
    ::-webkit-scrollbar-corner {
      background: #cfcece;
    }
    
    
    
    /*Buttons*/
    ::-webkit-scrollbar-button {
        background-size: 75%;
        background-repeat: no-repeat;
        background-position: center; 
    }
    
    ::-webkit-scrollbar-button:horizontal:increment {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQxLjk5OSA0MS45OTkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQxLjk5OSA0MS45OTk7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8cGF0aCBkPSJNMzYuMDY4LDIwLjE3NmwtMjktMjBDNi43NjEtMC4wMzUsNi4zNjMtMC4wNTcsNi4wMzUsMC4xMTRDNS43MDYsMC4yODcsNS41LDAuNjI3LDUuNSwwLjk5OXY0MCAgYzAsMC4zNzIsMC4yMDYsMC43MTMsMC41MzUsMC44ODZjMC4xNDYsMC4wNzYsMC4zMDYsMC4xMTQsMC40NjUsMC4xMTRjMC4xOTksMCwwLjM5Ny0wLjA2LDAuNTY4LTAuMTc3bDI5LTIwICBjMC4yNzEtMC4xODcsMC40MzItMC40OTQsMC40MzItMC44MjNTMzYuMzM4LDIwLjM2MywzNi4wNjgsMjAuMTc2eiBNNy41LDM5LjA5NVYyLjkwNGwyNi4yMzksMTguMDk2TDcuNSwzOS4wOTV6IiBmaWxsPSIjNzc3Nzc3Ii8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
    }
    
    ::-webkit-scrollbar-button:horizontal:decrement {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KCjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0iQ2FwYV8xIgogICB4PSIwcHgiCiAgIHk9IjBweCIKICAgdmlld0JveD0iMCAwIDQxLjk5OSA0MS45OTkiCiAgIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQxLjk5OSA0MS45OTk7IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICB3aWR0aD0iNTEycHgiCiAgIGhlaWdodD0iNTEycHgiCiAgIHNvZGlwb2RpOmRvY25hbWU9InBsYXktYnV0dG9uLnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMC45Mi4zICgyNDA1NTQ2LCAyMDE4LTAzLTExKSI+PG1ldGFkYXRhCiAgIGlkPSJtZXRhZGF0YTM5Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlCiAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgIGlkPSJkZWZzMzciIC8+PHNvZGlwb2RpOm5hbWVkdmlldwogICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICBib3JkZXJvcGFjaXR5PSIxIgogICBvYmplY3R0b2xlcmFuY2U9IjEwIgogICBncmlkdG9sZXJhbmNlPSIxMCIKICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMTc3IgogICBpZD0ibmFtZWR2aWV3MzUiCiAgIHNob3dncmlkPSJmYWxzZSIKICAgaW5rc2NhcGU6em9vbT0iMC40NjA5Mzc1IgogICBpbmtzY2FwZTpjeD0iLTE2LjI3MTE4NiIKICAgaW5rc2NhcGU6Y3k9IjI1NiIKICAgaW5rc2NhcGU6d2luZG93LXg9Ii00IgogICBpbmtzY2FwZTp3aW5kb3cteT0iLTQiCiAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiCiAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9IkNhcGFfMSIgLz4KPHBhdGgKICAgZD0ibSA1LjkzMiwyMC4xNzYgMjksLTIwIGMgMC4zMDcsLTAuMjExIDAuNzA1LC0wLjIzMyAxLjAzMywtMC4wNjIgMC4zMjksMC4xNzMgMC41MzUsMC41MTMgMC41MzUsMC44ODUgdiA0MCBjIDAsMC4zNzIgLTAuMjA2LDAuNzEzIC0wLjUzNSwwLjg4NiAtMC4xNDYsMC4wNzYgLTAuMzA2LDAuMTE0IC0wLjQ2NSwwLjExNCAtMC4xOTksMCAtMC4zOTcsLTAuMDYgLTAuNTY4LC0wLjE3NyBsIC0yOSwtMjAgQyA1LjY2MSwyMS42MzUgNS41LDIxLjMyOCA1LjUsMjAuOTk5IDUuNSwyMC42NyA1LjY2MiwyMC4zNjMgNS45MzIsMjAuMTc2IFogTSAzNC41LDM5LjA5NSBWIDIuOTA0IEwgOC4yNjEsMjEgWiIKICAgaWQ9InBhdGgyIgogICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICBzdHlsZT0iZmlsbDojNzc3Nzc3IiAvPgo8ZwogICBpZD0iZzQiPgo8L2c+CjxnCiAgIGlkPSJnNiI+CjwvZz4KPGcKICAgaWQ9Imc4Ij4KPC9nPgo8ZwogICBpZD0iZzEwIj4KPC9nPgo8ZwogICBpZD0iZzEyIj4KPC9nPgo8ZwogICBpZD0iZzE0Ij4KPC9nPgo8ZwogICBpZD0iZzE2Ij4KPC9nPgo8ZwogICBpZD0iZzE4Ij4KPC9nPgo8ZwogICBpZD0iZzIwIj4KPC9nPgo8ZwogICBpZD0iZzIyIj4KPC9nPgo8ZwogICBpZD0iZzI0Ij4KPC9nPgo8ZwogICBpZD0iZzI2Ij4KPC9nPgo8ZwogICBpZD0iZzI4Ij4KPC9nPgo8ZwogICBpZD0iZzMwIj4KPC9nPgo8ZwogICBpZD0iZzMyIj4KPC9nPgo8L3N2Zz4=);
    }
    
    ::-webkit-scrollbar-button:vertical:increment {
        background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KCjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0iQ2FwYV8xIgogICB4PSIwcHgiCiAgIHk9IjBweCIKICAgdmlld0JveD0iMCAwIDQxLjk5OSA0MS45OTkiCiAgIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQxLjk5OSA0MS45OTk7IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICB3aWR0aD0iNTEycHgiCiAgIGhlaWdodD0iNTEycHgiCiAgIHNvZGlwb2RpOmRvY25hbWU9InVwLnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMC45Mi4zICgyNDA1NTQ2LCAyMDE4LTAzLTExKSI+PG1ldGFkYXRhCiAgIGlkPSJtZXRhZGF0YTM5Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlCiAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgIGlkPSJkZWZzMzciIC8+PHNvZGlwb2RpOm5hbWVkdmlldwogICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICBib3JkZXJvcGFjaXR5PSIxIgogICBvYmplY3R0b2xlcmFuY2U9IjEwIgogICBncmlkdG9sZXJhbmNlPSIxMCIKICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMTc3IgogICBpZD0ibmFtZWR2aWV3MzUiCiAgIHNob3dncmlkPSJmYWxzZSIKICAgaW5rc2NhcGU6em9vbT0iMC40NjA5Mzc1IgogICBpbmtzY2FwZTpjeD0iLTI4OC41NDIzNyIKICAgaW5rc2NhcGU6Y3k9IjI1NiIKICAgaW5rc2NhcGU6d2luZG93LXg9Ii00IgogICBpbmtzY2FwZTp3aW5kb3cteT0iLTQiCiAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiCiAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9IkNhcGFfMSIgLz4KPHBhdGgKICAgZD0iTSAyMC4xNzY0OTEsMzYuMDY3NTA5IDAuMTc2NDkwNTEsNy4wNjc1MDk1IGMgLTAuMjExLC0wLjMwNyAtMC4yMzMsLTAuNzA1IC0wLjA2MiwtMS4wMzMgMC4xNzMsLTAuMzI5IDAuNTEzLC0wLjUzNSAwLjg4NSwtMC41MzUgSCA0MC45OTk0OSBjIDAuMzcyLDAgMC43MTMsMC4yMDYgMC44ODYsMC41MzUgMC4wNzYsMC4xNDYgMC4xMTQsMC4zMDYgMC4xMTQsMC40NjUgMCwwLjE5OSAtMC4wNiwwLjM5NyAtMC4xNzcsMC41NjggTCAyMS44MjI0OTEsMzYuMDY3NTA5IGMgLTAuMTg3LDAuMjcxIC0wLjQ5NCwwLjQzMiAtMC44MjMsMC40MzIgLTAuMzI5LDAgLTAuNjM2LC0wLjE2MiAtMC44MjMsLTAuNDMyIHogTSAzOS4wOTU0OSw3LjQ5OTUwOTUgSCAyLjkwNDQ5MDUgTCAyMS4wMDA0OTEsMzMuNzM4NTA5IFoiCiAgIGlkPSJwYXRoMiIKICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgc3R5bGU9ImZpbGw6Izc3Nzc3NyIgLz4KPGcKICAgaWQ9Imc0Ij4KPC9nPgo8ZwogICBpZD0iZzYiPgo8L2c+CjxnCiAgIGlkPSJnOCI+CjwvZz4KPGcKICAgaWQ9ImcxMCI+CjwvZz4KPGcKICAgaWQ9ImcxMiI+CjwvZz4KPGcKICAgaWQ9ImcxNCI+CjwvZz4KPGcKICAgaWQ9ImcxNiI+CjwvZz4KPGcKICAgaWQ9ImcxOCI+CjwvZz4KPGcKICAgaWQ9ImcyMCI+CjwvZz4KPGcKICAgaWQ9ImcyMiI+CjwvZz4KPGcKICAgaWQ9ImcyNCI+CjwvZz4KPGcKICAgaWQ9ImcyNiI+CjwvZz4KPGcKICAgaWQ9ImcyOCI+CjwvZz4KPGcKICAgaWQ9ImczMCI+CjwvZz4KPGcKICAgaWQ9ImczMiI+CjwvZz4KPC9zdmc+);
    }
    
    ::-webkit-scrollbar-button:vertical:decrement  {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KCjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0iQ2FwYV8xIgogICB4PSIwcHgiCiAgIHk9IjBweCIKICAgdmlld0JveD0iMCAwIDQxLjk5OSA0MS45OTkiCiAgIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQxLjk5OSA0MS45OTk7IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICB3aWR0aD0iNTEycHgiCiAgIGhlaWdodD0iNTEycHgiCiAgIHNvZGlwb2RpOmRvY25hbWU9InVwLnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMC45Mi4zICgyNDA1NTQ2LCAyMDE4LTAzLTExKSI+PG1ldGFkYXRhCiAgIGlkPSJtZXRhZGF0YTM5Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlCiAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgIGlkPSJkZWZzMzciIC8+PHNvZGlwb2RpOm5hbWVkdmlldwogICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICBib3JkZXJvcGFjaXR5PSIxIgogICBvYmplY3R0b2xlcmFuY2U9IjEwIgogICBncmlkdG9sZXJhbmNlPSIxMCIKICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMTc3IgogICBpZD0ibmFtZWR2aWV3MzUiCiAgIHNob3dncmlkPSJmYWxzZSIKICAgaW5rc2NhcGU6em9vbT0iMC40NjA5Mzc1IgogICBpbmtzY2FwZTpjeD0iLTI4OC41NDIzNyIKICAgaW5rc2NhcGU6Y3k9IjI1NiIKICAgaW5rc2NhcGU6d2luZG93LXg9Ii00IgogICBpbmtzY2FwZTp3aW5kb3cteT0iLTQiCiAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiCiAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9IkNhcGFfMSIgLz4KPHBhdGgKICAgZD0ibSAyMS44MjM1MDksNS45MzE1MDk1IDIwLDI4Ljk5OTk5OTUgYyAwLjIxMSwwLjMwNyAwLjIzMywwLjcwNSAwLjA2MiwxLjAzMyAtMC4xNzMsMC4zMjkgLTAuNTEzLDAuNTM1IC0wLjg4NSwwLjUzNSBIIDEuMDAwNTA5NSBjIC0wLjM3MjAwMDAxLDAgLTAuNzEzMDAwMDEsLTAuMjA2IC0wLjg4NjAwMDAxLC0wLjUzNSAtMC4wNzYsLTAuMTQ2IC0wLjExMzk5OTk5NTcxLC0wLjMwNiAtMC4xMTM5OTk5OTU3MSwtMC40NjUgMCwtMC4xOTkgMC4wNTk5OTk5OTU3LC0wLjM5NyAwLjE3Njk5OTk5NTcxLC0wLjU2OCBMIDIwLjE3NzUwOSw1LjkzMTUwOTUgYyAwLjE4NywtMC4yNzEgMC40OTQsLTAuNDMyIDAuODIzLC0wLjQzMiAwLjMyOSwwIDAuNjM2LDAuMTYyIDAuODIzLDAuNDMyIHogTSAyLjkwNDUwOTUsMzQuNDk5NTA5IEggMzkuMDk1NTA5IGwgLTE4LjA5NiwtMjYuMjM4OTk5NSB6IgogICBpZD0icGF0aDIiCiAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgIHN0eWxlPSJmaWxsOiM3Nzc3NzciIC8+CjxnCiAgIGlkPSJnNCI+CjwvZz4KPGcKICAgaWQ9Imc2Ij4KPC9nPgo8ZwogICBpZD0iZzgiPgo8L2c+CjxnCiAgIGlkPSJnMTAiPgo8L2c+CjxnCiAgIGlkPSJnMTIiPgo8L2c+CjxnCiAgIGlkPSJnMTQiPgo8L2c+CjxnCiAgIGlkPSJnMTYiPgo8L2c+CjxnCiAgIGlkPSJnMTgiPgo8L2c+CjxnCiAgIGlkPSJnMjAiPgo8L2c+CjxnCiAgIGlkPSJnMjIiPgo8L2c+CjxnCiAgIGlkPSJnMjQiPgo8L2c+CjxnCiAgIGlkPSJnMjYiPgo8L2c+CjxnCiAgIGlkPSJnMjgiPgo8L2c+CjxnCiAgIGlkPSJnMzAiPgo8L2c+CjxnCiAgIGlkPSJnMzIiPgo8L2c+Cjwvc3ZnPg==);
    }
    

    I could not find anyway of changing the color of the svg image from withing the css file, so I resorted to applying the color to the svg image before converting to base64, I tried to use png images but they are not as sharp and they scale horribly, I have amended the code accordingly.

    I am still looking for a way to make the thumb maintain a minimum size.

    Regards
    raed

    Edit: added a thumb active state.



  • If anyone is interested in playing around with this code and not sure how to go about it, here is a step by step guide:

    1-Create a folder (call it: Custom scrollbar) anywhere on your hard disk except inside Vivaldi's extensions folder (chrome store deletes any extensions present in the extensions folder that were not downloaded from the store itself).
    2- Copy and paste into notepad two files and save as: 1- manifest.json and 2- custom.css into the "Custom scrollbar" folder you just created.
    3-Open manage extensions interface in Vivaldi, tick the box next to Developer mode.
    4-Click on: Load unpacked extension, and navigate to the location of "Custom scrollbar" folder that you created which holds both manifest.json and custom.css files.
    5-make sure the Vivaldi custom scrollbar extension is enabled in the extensions interface.
    6-close all open instances of Vivaldi and relaunch the browser for the changes to take effect.
    7-If you wish to try another custom scroll bar, you only need to replace the custom.css file in the "Custom scrollbar" folder, the manifest.json file remains unchanged.

    Regards
    raed



  • I figured out how to maintain a minimum size thumb if anyone is interested.
    First you need to specify a horizontal thumb and a vertical thumb:

    ::-webkit-scrollbar-thumb:horizontal {
    

    and

    ::-webkit-scrollbar-thumb:vertical {
    

    you add:

        min-width:75px;
    

    to the horizintal thumb.

    And:

        min-height: 75px;
    

    to the vertical thumb.

    I find 75px works fine for me, ranges between 50px and 100px are also usable.

    Regards
    raed

    Note: forum software refuses to allow me to edit above code to incorporate the minimum thumb, it keeps flagging my edit as spam. I have also put together another version with transparent rails and gradient colored thumbs, again I can't post, forum flags it as spam as well.



  • @raed

    Minimum size is a good idea, the thumb can get minuscule at times. The transparent track however is a bit of a placebo since the space is still reserved for the width of the track, it's just filled with the body background colour of the web page.

    The experimental overlay scrollbar built into chrome is satisfactory but far from perfect. Firefox makes customising this element so much easier, I don't know why Chrome is being so difficult.



  • This script has a more elegant less obtrusive scrollbar that has its thumb set to a minimum height of 75px.
    Regards
    raed

    /*Scrollbar*/
    ::-webkit-scrollbar {
        width:15px;
        height:15px;
    }
    
    /*Track*/
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    
    /*Thumb*/
    ::-webkit-scrollbar-thumb:horizontal {
        background: -webkit-linear-gradient(left, rgba(98,98,98,0.4) 0%,rgba(160,160,160,0) 100%);
        background-clip: padding-box;
        border-radius: 2px;
        border: 5px solid transparent;
        min-width:75px;
    }
    
    
    ::-webkit-scrollbar-thumb:vertical {
        background: -webkit-linear-gradient(rgba(98,98,98,0.4) 0%,rgba(160,160,160,0) 100%);
        background-clip: padding-box;
        border-radius: 2px;
        border: 5px solid transparent;
        min-height: 75px;
    }
    
    /* Thumb hover */
    ::-webkit-scrollbar-thumb:horizontal:hover {
        background: -webkit-linear-gradient(left, rgba(98,98,98,0.6) 0%,rgba(160,160,160,0) 100%);
       border: 2px solid transparent;
        border-radius: 2px;
        background-clip: padding-box;
    }
    
    ::-webkit-scrollbar-thumb:vertical:hover {
        background: -webkit-linear-gradient(rgba(98,98,98,0.6) 0%,rgba(160,160,160,0) 100%);
       border: 2px solid transparent;
        border-radius: 2px;
        background-clip: padding-box;
    }
    
    /* Thumb active */
    ::-webkit-scrollbar-thumb:horizontal:active {
        background: -webkit-linear-gradient(left, rgba(98,98,98,0.8) 0%,rgba(160,160,160,0) 100%);
        border: 1px solid transparent;
        border-radius: 2px;
        background-clip: padding-box;
    }
    
    ::-webkit-scrollbar-thumb:vertical:active {
        background: -webkit-linear-gradient(rgba(98,98,98,0.8) 0%,rgba(160,160,160,0) 100%);
        border: 1px solid transparent;
        border-radius: 2px;
        background-clip: padding-box;
    }
    
    
    /*Corner*/
    ::-webkit-scrollbar-corner {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgd2lkdGg9IjUxMiIKICAgaGVpZ2h0PSI1MTIiCiAgIHZpZXdCb3g9IjAgMCAxMzUuNDY2NjYgMTM1LjQ2NjY3IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc5NjEiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM5NTUiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhOTU4Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZwogICAgIGlkPSJsYXllcjEiCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMTYxLjUzMzMyKSI+CiAgICA8cmVjdAogICAgICAgdHJhbnNmb3JtPSJzY2FsZSgtMSwxKSIKICAgICAgIHk9IjI2Ny4xMDMiCiAgICAgICB3aWR0aD0iMTUuMDUxODgxIgogICAgICAgaGVpZ2h0PSIxNS4wNTE4ODEiCiAgICAgICBpZD0icmVjdDItMC0wIgogICAgICAgeD0iLTEyMC42NDYyMSIKICAgICAgIHN0eWxlPSJmaWxsOiM5OTk5OTk7c3Ryb2tlLXdpZHRoOjAuMjY0NTgzMzIiIC8+CiAgICA8cmVjdAogICAgICAgdHJhbnNmb3JtPSJzY2FsZSgtMSwxKSIKICAgICAgIHk9IjI2Ny4xMDMiCiAgICAgICB3aWR0aD0iMTUuMDUxODgxIgogICAgICAgaGVpZ2h0PSIxNS4wNTE4ODEiCiAgICAgICBpZD0icmVjdDItMC01IgogICAgICAgeD0iLTkwLjU0MjQ1IgogICAgICAgc3R5bGU9ImZpbGw6I2IzYjNiMztzdHJva2Utd2lkdGg6MC4yNjQ1ODMzMiIgLz4KICAgIDxyZWN0CiAgICAgICB0cmFuc2Zvcm09InNjYWxlKC0xLDEpIgogICAgICAgeT0iMjM2Ljk5OTI0IgogICAgICAgd2lkdGg9IjE1LjA1MTg4MSIKICAgICAgIGhlaWdodD0iMTUuMDUxODgxIgogICAgICAgaWQ9InJlY3QyLTAtNyIKICAgICAgIHg9Ii0xMjAuNjQ2MjEiCiAgICAgICBzdHlsZT0iZmlsbDojOTk5OTk5O3N0cm9rZS13aWR0aDowLjI2NDU4MzMyIiAvPgogICAgPHJlY3QKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoLTEsMSkiCiAgICAgICB5PSIyNjcuMTAzIgogICAgICAgd2lkdGg9IjE1LjA1MTg4MSIKICAgICAgIGhlaWdodD0iMTUuMDUxODgxIgogICAgICAgaWQ9InJlY3QyLTAtNzMiCiAgICAgICB4PSItNjAuNDM4NjkiCiAgICAgICBzdHlsZT0iZmlsbDojOTk5OTk5O3N0cm9rZS13aWR0aDowLjI2NDU4MzMyIiAvPgogICAgPHJlY3QKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoLTEsMSkiCiAgICAgICB5PSIyMzYuOTk5MjQiCiAgICAgICB3aWR0aD0iMTUuMDUxODgxIgogICAgICAgaGVpZ2h0PSIxNS4wNTE4ODEiCiAgICAgICBpZD0icmVjdDItMC02IgogICAgICAgeD0iLTkwLjU0MjQ1IgogICAgICAgc3R5bGU9ImZpbGw6Izk5OTk5OTtzdHJva2Utd2lkdGg6MC4yNjQ1ODMzMiIgLz4KICAgIDxyZWN0CiAgICAgICB0cmFuc2Zvcm09InNjYWxlKC0xLDEpIgogICAgICAgeT0iMjA2Ljg5NTQ4IgogICAgICAgd2lkdGg9IjE1LjA1MTg4MSIKICAgICAgIGhlaWdodD0iMTUuMDUxODgxIgogICAgICAgaWQ9InJlY3QyLTAtOCIKICAgICAgIHg9Ii0xMjAuNjQ2MjEiCiAgICAgICBzdHlsZT0iZmlsbDojOTk5OTk5O3N0cm9rZS13aWR0aDowLjI2NDU4MzMyIiAvPgogIDwvZz4KICA8cGF0aAogICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4yNjQ1ODMzMykiCiAgICAgaWQ9InBhdGg4MTgiCiAgICAgZD0ibSAxNzIuOTA4NDcsNDI3LjM4OTgzIHYgLTI4LjIwMzM5IGggMjcuMTE4NjUgMjcuMTE4NjQgdiAyOC4yMDMzOSAyOC4yMDMzOSBoIC0yNy4xMTg2NCAtMjcuMTE4NjUgeiIKICAgICBzdHlsZT0iZmlsbDojYjNiM2IzO3N0cm9rZS13aWR0aDowLjg2Nzc5NjY7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmUiIC8+CiAgPHBhdGgKICAgICB0cmFuc2Zvcm09InNjYWxlKDAuMjY0NTgzMzMpIgogICAgIGlkPSJwYXRoODIwIgogICAgIGQ9Im0gMjg1LjcyMjAzLDMxMy40OTE1MyB2IC0yNy4xMTg2NSBoIDI4LjIwMzM5IDI4LjIwMzM5IHYgMjcuMTE4NjUgMjcuMTE4NjQgaCAtMjguMjAzMzkgLTI4LjIwMzM5IHoiCiAgICAgc3R5bGU9ImZpbGw6I2IzYjNiMztzdHJva2Utd2lkdGg6MC44Njc3OTY2O3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAvPgogIDxwYXRoCiAgICAgdHJhbnNmb3JtPSJzY2FsZSgwLjI2NDU4MzMzKSIKICAgICBpZD0icGF0aDgyMiIKICAgICBkPSJtIDQwMC43MDUwOCw0MjcuMzg5ODMgdiAtMjguMjAzMzkgaCAyNy4xMTg2NSAyNy4xMTg2NCB2IDI4LjIwMzM5IDI4LjIwMzM5IGggLTI3LjExODY0IC0yNy4xMTg2NSB6IgogICAgIHN0eWxlPSJmaWxsOiNiM2IzYjM7c3Ryb2tlLXdpZHRoOjAuODY3Nzk2NjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSIgLz4KICA8cGF0aAogICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4yNjQ1ODMzMykiCiAgICAgaWQ9InBhdGg4MjQiCiAgICAgZD0ibSA0MDAuNzA1MDgsMzEzLjQ5MTUzIHYgLTI3LjExODY1IGggMjcuMTE4NjUgMjcuMTE4NjQgdiAyNy4xMTg2NSAyNy4xMTg2NCBoIC0yNy4xMTg2NCAtMjcuMTE4NjUgeiIKICAgICBzdHlsZT0iZmlsbDojYjNiM2IzO3N0cm9rZS13aWR0aDowLjg2Nzc5NjY7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmUiIC8+CiAgPHBhdGgKICAgICB0cmFuc2Zvcm09InNjYWxlKDAuMjY0NTgzMzMpIgogICAgIGlkPSJwYXRoODI2IgogICAgIGQ9Im0gNDAwLjcwNTA4LDE5OS41OTMyMiB2IC0yOC4yMDMzOSBoIDI3LjExODY1IDI3LjExODY0IHYgMjguMjAzMzkgMjguMjAzMzkgaCAtMjcuMTE4NjQgLTI3LjExODY1IHoiCiAgICAgc3R5bGU9ImZpbGw6I2IzYjNiMztzdHJva2Utd2lkdGg6MC44Njc3OTY2O3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAvPgo8L3N2Zz4K);
        background-color:rgba(119, 119, 119,0.15);
        width:15px;
        height:15px;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center; 
    }
    
    ::-webkit-scrollbar-button {
        background-size: 90%;
        width:15px;
        height:15px;
        background-repeat: no-repeat;
        background-position: center; 
    }
    
    
    
    ::-webkit-scrollbar-button:horizontal:increment {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBvbHlnb24gcG9pbnRzPSI2LDAgNiwyNCAxOCwxMS45OTkgICIgZmlsbD0iIzc3Nzc3NyIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
    }
    
    ::-webkit-scrollbar-button:horizontal:decrement {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaGVpZ2h0PSI1MTJweCIKICAgd2lkdGg9IjUxMnB4IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiCiAgIHZpZXdCb3g9IjAgMCAyNCAyNCIKICAgeT0iMHB4IgogICB4PSIwcHgiCiAgIGlkPSJDYXBhXzEiCiAgIHZlcnNpb249IjEuMSI+PG1ldGFkYXRhCiAgIGlkPSJtZXRhZGF0YTQxIj48cmRmOlJERj48Y2M6V29yawogICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlCiAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgIGlkPSJkZWZzMzkiIC8+CjxnCiAgIHRyYW5zZm9ybT0icm90YXRlKC0xODAsMTIsMTIpIgogICBpZD0iZzQiPgoJPHBvbHlnb24KICAgc3R5bGU9ImZpbGw6Izc3Nzc3NyIKICAgaWQ9InBvbHlnb24yIgogICBwb2ludHM9IjE4LDExLjk5OSA2LDAgNiwyNCAiIC8+CjwvZz4KPGcKICAgaWQ9Imc2Ij4KPC9nPgo8ZwogICBpZD0iZzgiPgo8L2c+CjxnCiAgIGlkPSJnMTAiPgo8L2c+CjxnCiAgIGlkPSJnMTIiPgo8L2c+CjxnCiAgIGlkPSJnMTQiPgo8L2c+CjxnCiAgIGlkPSJnMTYiPgo8L2c+CjxnCiAgIGlkPSJnMTgiPgo8L2c+CjxnCiAgIGlkPSJnMjAiPgo8L2c+CjxnCiAgIGlkPSJnMjIiPgo8L2c+CjxnCiAgIGlkPSJnMjQiPgo8L2c+CjxnCiAgIGlkPSJnMjYiPgo8L2c+CjxnCiAgIGlkPSJnMjgiPgo8L2c+CjxnCiAgIGlkPSJnMzAiPgo8L2c+CjxnCiAgIGlkPSJnMzIiPgo8L2c+CjxnCiAgIGlkPSJnMzQiPgo8L2c+Cjwvc3ZnPg==);
    }
    
    ::-webkit-scrollbar-button:vertical:increment {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaGVpZ2h0PSI1MTJweCIKICAgd2lkdGg9IjUxMnB4IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiCiAgIHZpZXdCb3g9IjAgMCAyNCAyNCIKICAgeT0iMHB4IgogICB4PSIwcHgiCiAgIGlkPSJDYXBhXzEiCiAgIHZlcnNpb249IjEuMSI+PG1ldGFkYXRhCiAgIGlkPSJtZXRhZGF0YTQxIj48cmRmOlJERj48Y2M6V29yawogICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlCiAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgIGlkPSJkZWZzMzkiIC8+CjxnCiAgIHRyYW5zZm9ybT0icm90YXRlKDkwLDEyLDEyKSIKICAgaWQ9Imc0Ij4KCTxwb2x5Z29uCiAgIHN0eWxlPSJmaWxsOiM3Nzc3NzciCiAgIGlkPSJwb2x5Z29uMiIKICAgcG9pbnRzPSIxOCwxMS45OTkgNiwwIDYsMjQgIiAvPgo8L2c+CjxnCiAgIGlkPSJnNiI+CjwvZz4KPGcKICAgaWQ9Imc4Ij4KPC9nPgo8ZwogICBpZD0iZzEwIj4KPC9nPgo8ZwogICBpZD0iZzEyIj4KPC9nPgo8ZwogICBpZD0iZzE0Ij4KPC9nPgo8ZwogICBpZD0iZzE2Ij4KPC9nPgo8ZwogICBpZD0iZzE4Ij4KPC9nPgo8ZwogICBpZD0iZzIwIj4KPC9nPgo8ZwogICBpZD0iZzIyIj4KPC9nPgo8ZwogICBpZD0iZzI0Ij4KPC9nPgo8ZwogICBpZD0iZzI2Ij4KPC9nPgo8ZwogICBpZD0iZzI4Ij4KPC9nPgo8ZwogICBpZD0iZzMwIj4KPC9nPgo8ZwogICBpZD0iZzMyIj4KPC9nPgo8ZwogICBpZD0iZzM0Ij4KPC9nPgo8L3N2Zz4=);
    }
    
    ::-webkit-scrollbar-button:vertical:decrement  {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaGVpZ2h0PSI1MTJweCIKICAgd2lkdGg9IjUxMnB4IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiCiAgIHZpZXdCb3g9IjAgMCAyNCAyNCIKICAgeT0iMHB4IgogICB4PSIwcHgiCiAgIGlkPSJDYXBhXzEiCiAgIHZlcnNpb249IjEuMSI+PG1ldGFkYXRhCiAgIGlkPSJtZXRhZGF0YTQxIj48cmRmOlJERj48Y2M6V29yawogICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlCiAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgIGlkPSJkZWZzMzkiIC8+CjxnCiAgIHRyYW5zZm9ybT0icm90YXRlKC05MCwxMiwxMikiCiAgIGlkPSJnNCI+Cgk8cG9seWdvbgogICBzdHlsZT0iZmlsbDojNzc3Nzc3IgogICBpZD0icG9seWdvbjIiCiAgIHBvaW50cz0iNiwwIDYsMjQgMTgsMTEuOTk5ICIgLz4KPC9nPgo8ZwogICBpZD0iZzYiPgo8L2c+CjxnCiAgIGlkPSJnOCI+CjwvZz4KPGcKICAgaWQ9ImcxMCI+CjwvZz4KPGcKICAgaWQ9ImcxMiI+CjwvZz4KPGcKICAgaWQ9ImcxNCI+CjwvZz4KPGcKICAgaWQ9ImcxNiI+CjwvZz4KPGcKICAgaWQ9ImcxOCI+CjwvZz4KPGcKICAgaWQ9ImcyMCI+CjwvZz4KPGcKICAgaWQ9ImcyMiI+CjwvZz4KPGcKICAgaWQ9ImcyNCI+CjwvZz4KPGcKICAgaWQ9ImcyNiI+CjwvZz4KPGcKICAgaWQ9ImcyOCI+CjwvZz4KPGcKICAgaWQ9ImczMCI+CjwvZz4KPGcKICAgaWQ9ImczMiI+CjwvZz4KPGcKICAgaWQ9ImczNCI+CjwvZz4KPC9zdmc+);
    }


  • why dont you use: chrome://flags/#overlay-scrollbars

    Switch it to enamble :)



  • @burbuja
    Two reasons, I find a dark blob at the edge of my browser window very distracting, and when visiting long pages the blob turns into a small dot that I find hard to click.
    Why don't you try the above code for a comparison?
    Regards
    raed


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.