Question

我有一个使用溢出的可滚动div：滚动。

我想在此div中设置滚动条的样式，但是我添加的样式也会更改浏览器的滚动条。如何调整它以便仅页面内滚动条发生变化？

注意：请在Chrome中进行测试，因为这是我到目前为止已经测试过的内容，滚动条样式在Firefox中不起作用。

Codepen：https://codepen.io/anon/pen/ZMdBQQ

CSS ：

::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #ADADAD;
}

::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}

Answer 1

仅将其限制为.scroll元素，如下所示：

.scroll::-webkit-scrollbar {
    width: 16px;
}

https://codepen.io/anon/pen/yxdgmq

Answer 2

在-webkit代码之前添加类.scroll

.scroll::-webkit-scrollbar {
    width: 16px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

.scroll::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
   border-radius: 10px;
   background: #ADADAD;
}

.scroll::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}

Answer 3

这可能有点棘手，因为它取决于浏览器。通常，人们会使用div元素（使用JS描述其行为）和真实的滚动条来绘制自己的“滚动条”，并隐藏~22px来阻止宽度并添加CSS属性overflow: scroll-y。

更新：我为您找到了一些simple scripts。

Answer 4

.scroll将需要首先添加。否则它将注册为此

:root::-webkit-scrollbar {
    width: 16px;
}

:root::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

:root::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #ADADAD;
}

:root::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}
/*Nothing to do with this*/
:root {
font-size: 200px
}

<p>Hi! This will not register once as a scrollbar.<br><br>It's going to register as:
:root::-webkit-scrollbar {
    width: 16px;
}

:root::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

:root::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #ADADAD;
}

:root::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}
</p>

用于.scroll class 我们将必须这样做：

/*nothing to do with this*/
.scroll {
height: 80px;
font-size: 100px;
background: red;
overflow: auto;
}

.scroll::-webkit-scrollbar {
    width: 16px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

.scroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #ADADAD;
}

.scroll::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}

<div class="scroll">
Hi,
<br>
This will register for 
<br >
a styled scrollbar in HTML, and CSS.
<br />
With the class scroll(.scroll)
</div>

CSS scrollbar styling - CSS-Tricks

CodePen：https://codepen.io/CatMan10/pen/yQjqaM

如何在不更改浏览器滚动条的情况下设置页面内滚动条的样式？

4 个答案: