<style lang="scss" scoped>
.seamless-warp {
height: 340px;
overflow: auto;
// 滚动条样式修改
/* 滚动条轨道区域样式 */
&::-webkit-scrollbar {
width: 8px; /* 设置滚动条宽度为8像素 */
}
/* 滑块样式 */
&::-webkit-scrollbar-thumb {
background-color: #b8b8b8; /* 设置滑块颜色为深灰色 */
border-radius: 4px; /* 设置滑块边角半径为4像素 */
}
/* 滚动条轨道内部空白区域样式 */
&::-webkit-scrollbar-track {
background-color: #f0f0f0; /* 设置轨道背景色为浅灰色 */
}
/* 滚动条两端按钮样式 */
&::-webkit-scrollbar-button {
display: none; /* 不显示按钮 */
}
/* 交叉点处的区域样式 */
&::-webkit-scrollbar-corner {
background-color: transparent; /* 设置交叉点处的背景色为透明 */
}
/* 调整大小手柄样式 */
&::-webkit-resizer {
display: none; /* 不显示调整大小手柄 */
}
}
</style>
css修改滚动条的样式
最新推荐文章于 2024-07-18 13:56:09 发布