CSS Body scrollbar over background

Question

I want my site's scrollbar overlays the entire body background, like this: (*image taken from here)

And I somehow achieved it with CSS like this:

body::-webkit-scrollbar {
    width: 1vw;
    background: transparent;
}
body::-webkit-scrollbar-thumb {
    background: -moz-linear-gradient(left, rgba(30, 87, 153, .6) 42%, rgba(30, 87, 153, .6) 42%, rgba(125, 185, 232, .6) 100%);
    background: -webkit-linear-gradient(left, rgba(30, 87, 153, .6) 42%, rgba(30, 87, 153, .6) 42%, rgba(125, 185, 232, .6) 100%);
    background: linear-gradient(to right, rgba(30, 87, 153, .6) 42%, rgba(30, 87, 153, .6) 42%, rgba(125, 185, 232, .6) 100%);
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
}
body::-webkit-scrollbar-thumb:hover {
    background: -moz-linear-gradient(left, rgba(30, 87, 153, 1) 42%, rgba(30, 87, 153, 1) 42%, rgba(125, 185, 232, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(30, 87, 153, 1) 42%, rgba(30, 87, 153, 1) 42%, rgba(125, 185, 232, 1) 100%);
    background: linear-gradient(to right, rgba(30, 87, 153, 1) 42%, rgba(30, 87, 153, 1) 42%, rgba(125, 185, 232, 1) 100%);
}
body::-webkit-scrollbar-track {
    background: transparent;
}

body {
    background-color: rgb(0,0,0)!important;
    background-image: url(some_image.png)!important;
    background-repeat: no-repeat!important;
    background-attachment: fixed!important;
    background-size: 100vw auto!important;
    width: 100vw!important;
    overflow-x: hidden;
}

This works nicely on desktop, but not in smaller device such as smartphones. So, i changed the background-size value to cover:

body {
    background-color: rgb(0,0,0)!important;
    background-image: url(some_image.png)!important;
    background-repeat: no-repeat!important;
    background-attachment: fixed!important;
    background-size: cover!important;
    width: 100vw!important;
    overflow-x: hidden;
}

Now it looks fine on smarthphones, but, when I switch back to desktop, the background-image doesn't fully stretch to viewport's width, which means the scrollbar takes space. Strangely, the background-color does!

Am i miss something?

Check this plugin out. This is a jQuery custom scroll-bar plugin. [http://manos.malihu.gr/jquery-custom-content-scroller/](http://manos.malihu.gr/jquery-custom-content-scroller/) — Thu San, Feb 13 '18 at 01:24
@ThuSama Thats a nice plugin, but i prefer css-only solution since im customizing existing site. — Wahyu, Feb 13 '18 at 03:11

score 1 · Accepted Answer · answered Feb 13 '18 at 02:20

Try @media Query for CSS. You need to set the resolution to suit your needs. Declare your regular style then use @media Query to change the style at a set resolution.

body::-webkit-scrollbar {
width: 1vw;
background: transparent;
}
body::-webkit-scrollbar-thumb {
background: -moz-linear-gradient(left, rgba(30, 87, 153, .6) 42%, rgba(30, 87, 153, .6) 42%, rgba(125, 185, 232, .6) 100%);
background: -webkit-linear-gradient(left, rgba(30, 87, 153, .6) 42%, rgba(30, 87, 153, .6) 42%, rgba(125, 185, 232, .6) 100%);
background: linear-gradient(to right, rgba(30, 87, 153, .6) 42%, rgba(30, 87, 153, .6) 42%, rgba(125, 185, 232, .6) 100%);
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
}
body::-webkit-scrollbar-thumb:hover {
background: -moz-linear-gradient(left, rgba(30, 87, 153, 1) 42%, rgba(30, 87, 153, 1) 42%, rgba(125, 185, 232, 1) 100%);
background: -webkit-linear-gradient(left, rgba(30, 87, 153, 1) 42%, rgba(30, 87, 153, 1) 42%, rgba(125, 185, 232, 1) 100%);
background: linear-gradient(to right, rgba(30, 87, 153, 1) 42%, rgba(30, 87, 153, 1) 42%, rgba(125, 185, 232, 1) 100%);
}
body::-webkit-scrollbar-track {
background: transparent;
} 

body {
background-color: rgb(0,0,0)!important;
background-image: url(some_image.png)!important;
background-repeat: no-repeat!important;
background-attachment: fixed!important;
background-size: 100vw auto!important;
width: 100vw!important;
overflow-x: hidden;
}


@media only screen and (max-width:400px){
body {
background-color: rgb(0,0,0)!important;
background-image: url(some_image.png)!important;
background-repeat: no-repeat!important;
background-attachment: fixed!important;
background-size: cover!important;
width: 100vw!important;
overflow-x: hidden!important;
}}

Finally i can sleep in peace :D – Wahyu Feb 13 '18 at 03:12 — Wahyu, Feb 13 '18 at 03:12

CSS Body scrollbar over background

1 Answers1