CSS Body滚动条在背景

Question

我希望我的网站的滚动条覆盖整个正文背景，如下所示： （*图片取自here）

我以某种方式用CSS实现了它：

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

这适用于台式机，但不适用于智能手机等小型设备。因此，我将background-size值更改为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;
}

现在它在智能手机上看起来很好，但是，当我切换回桌面时，background-image没有完全拉伸到视口的宽度，这意味着滚动条需要空间。奇怪的是，background-color确实如此！

我想念一下吗？

Answer 1

尝试@media Query for CSS。您需要设置分辨率以满足您的需求。 声明您的常规样式，然后使用@media Query以设定的分辨率更改样式。

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