css 怎么设置滚动条的高度和宽度 比如横向滚动设置高度 纵向滚动设置宽度

要设置滚动条的高度和宽度，您可以使用 CSS 中的 ::-webkit-scrollbar 选择器。下面是一个示例：
/* 横向滚动条样式 */
::-webkit-scrollbar {
height: 10px; /* 设置高度 */
width: 100%; /* 横向滚动条宽度默认是100% */
}

/* 竖向滚动条样式 */
::-webkit-scrollbar-vertical {
width: 10px; /* 设置宽度 */
height: 100%; /* 竖向滚动条高度默认是100% */
}
登录后复制
在上面的示例中，我们使用了 ::-webkit-scrollbar 选择器来选择滚动条，然后使用 height 和 width 属性来设置滚动条的高度和宽度。另外，我们还可以使用 ::-webkit-scrollbar-vertical 选择器来选择竖向滚动条，然后使用 width 和 height 属性来设置滚动条的宽度和高度。
请注意，这种方法只适用于 WebKit 浏览器（例如 Chrome、Safari 等），对于其他浏览器可能不起作用。

相关问题

css 纵向 水平 滚动条

CSS可以通过伪类选择器来自定义滚动条的样式，包括纵向和横向滚动条。具体实现方法如下：
1.纵向滚动条
/* Webkit内核浏览器 */
::-webkit-scrollbar {
width: 10px; /* 设置滚动条宽度 */
}

::-webkit-scrollbar-thumb {
background-color: #ccc; /* 设置滚动条颜色 */
}

/* IE浏览器 */
body {
scrollbar-face-color: #ccc; /* 设置滚动条颜色 */
scrollbar-width: 10px; /* 设置滚动条宽度 */
}
登录后复制
2.横向滚动条
/* Webkit内核浏览器 */
::-webkit-scrollbar {
height: 10px; /* 设置滚动条高度 */
}

::-webkit-scrollbar-thumb {
background-color: #ccc; /* 设置滚动条颜色 */
}

/* IE浏览器 */
body {
scrollbar-face-color: #ccc; /* 设置滚动条颜色 */
scrollbar-height: 10px; /* 设置滚动条高度 */
}
登录后复制
如果需要同时设置纵向和横向滚动条，可以将上述两种方法结合起来使用。

css Flex flex-direction: column;内容超过高度时出现横向滚动条，但是不出现纵向滚动条

如果您想在Flex容器中禁用纵向滚动条，但允许横向滚动条出现，可以使用以下样式：
.parent-element {
display: flex;
flex-direction: column;
max-height: 100vh; /* 设置最大高度 */
overflow-x: auto; /* 允许横向滚动条 */
overflow-y: hidden; /* 禁用纵向滚动条 */
}
登录后复制
这里，我们将Flex容器的方向设置为column，然后将overflow-x属性设置为auto，以允许横向滚动条出现。同时，将overflow-y属性设置为hidden，以禁用纵向滚动条。此外，我们还设置了一个最大高度，以确保内容不会超出浏览器窗口的高度。