bootstrapv4 给data-scrollbar设置滚动条
时间: 2023-12-22 18:06:15 浏览: 36
可以使用以下CSS样式为data-scrollbar设置滚动条:
```
[data-scrollbar] {
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: #ccc transparent;
}
```
这将为具有data-scrollbar属性的元素添加纵向滚动条,滚动条将显示为细线条,滚动条颜色为灰色。
相关问题
bootstrapv4的data-scrollbar="true"后如何设置显示滚动条
可以通过CSS样式来设置滚动条的样式和显示,例如:
```css
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
```
其中 `::-webkit-scrollbar` 设置滚动条的宽度,而 `::-webkit-scrollbar-track` 和 `::-webkit-scrollbar-thumb` 分别设置滚动条的背景和滑块的样式。可以根据需求自定义样式。
::-webkit-scrollbar设置滚动条不显示无效
如果设置 `-webkit-scrollbar` 后滚动条仍然不显示,可能是由于浏览器的安全策略阻止了你的代码。这种情况下,你可以尝试使用 JavaScript 来动态地添加样式规则来控制滚动条的样式。以下是一些示例代码:
```javascript
// 隐藏滚动条
document.documentElement.style.overflow = 'hidden';
// 自定义滚动条样式
document.documentElement.style.scrollbarWidth = 'thin';
document.documentElement.style.scrollbarColor = 'red yellow';
```
其中,`scrollbarWidth` 和 `scrollbarColor` 属性只适用于 Firefox 浏览器。在其他浏览器中,你可以使用 `-webkit-scrollbar` 来自定义滚动条样式。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)