css 怎么设置滚动条的高度和宽度 比如横向滚动设置高度 纵向滚动设置宽度
时间: 2024-01-13 15:04:03
浏览: 630
要设置滚动条的高度和宽度,您可以使用 CSS 中的 `::-webkit-scrollbar` [选择](https://geek.csdn.net/educolumn/1702526fead21a13fe2bdd53c9e98b89?spm=1055.2569.3001.10083)器。下面是一个示例:
```css
/* 横向滚动条样式 */
::-webkit-scrollbar {
height: 10px; /* 设置高度 */
width: 100%; /* 横向滚动条宽度默认是100% */
/* 竖向滚动条样式 */
::-webkit-scrollbar-vertical {
width: 10px; /* 设置宽度 */
height: 100%; /* 竖向滚动条高度默认是100% */
在上面的示例中,我们使用了 `::-webkit-scrollbar` [选择](https://geek.csdn.net/educolumn/1702526fead21a13fe2bdd53c9e98b89?spm=1055.2569.3001.10083)器来[选择](https://geek.csdn.net/educolumn/1702526fead21a13fe2bdd53c9e98b89?spm=1055.2569.3001.10083)滚动条,然后使用 `height` 和 `width` 属性来设置滚动条的高度和宽度。另外,我们还可以使用 `::-webkit-scrollbar-vertical` [选择](https://geek.csdn.net/educolumn/1702526fead21a13fe2bdd53c9e98b89?spm=1055.2569.3001.10083)器来选择竖向滚动条,然后使用 `width` 和 `height` 属性来设置滚动条的宽度和高度。
请注意,这种方法只适用于 WebKit 浏览器(例如 Chrome、Safari 等),对于其他浏览器可能不起[作用](https://geek.csdn.net/educolumn/1006730a19828887f70dae3b8cbe1e07?spm=1055.2569.3001.10083)。
相关问题
css 纵向 水平 滚动条
CSS可以通过伪类选择器来自定义滚动条的样式,包括纵向和横向滚动条。具体实现方法如下:
1.纵向滚动条
```css
/* Webkit内核浏览器 */
::-webkit-scrollbar {
width: 10px; /* 设置滚动条宽度 */
::-webkit-scrollbar-thumb {
background-color: #ccc; /* 设置滚动条颜色 */
/* IE浏览器 */
body {
scrollbar-face-color: #ccc; /* 设置滚动条颜色 */
scrollbar-width: 10px; /* 设置滚动条宽度 */
```