Search code examples
cssscrollbarbackground-size

CSS Body scrollbar over background

I want my site's scrollbar overlays the entire body background, like this: enter image description here (*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?

Solution

  • 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;
}}