CSS 背景上的正文滚动条

Question

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

我用 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 没有完全伸展到视口的宽度，这意味着滚动条需要 space。奇怪的是，background-color 确实如此！

我是不是漏掉了什么？

Answer 1

尝试@media 查询 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;
}}

CSS 背景上的正文滚动条

CSS Body scrollbar over background

css

scrollbar

background-size