滚动条自定义样式以及显示和隐藏

lei_0912

于 2021-03-01 15:55:29 发布

阅读量488

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/lei_0912/article/details/114264541

版权

本文介绍了如何使用CSS来自定义滚动条的样式，并提供了隐藏滚动条和设置特定样式的方法。值得注意的是，这些样式在iOS设备上可能无法生效，但在安卓设备上可以正常使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滚动条始终隐藏

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

自定义滚动条样式

ios上设置了不起作用，目前安卓是可以实现的

::-webkit-scrollbar {
    width: 5rpx;
    height: 13rpx;
    -webkit-border-radius: 5rpx;
    -moz-border-radius: 5rpx;
    border-radius: 5rpx;
  }
  
::-webkit-scrollbar-thumb {
    background-color: #c6a04d;
    background-clip: padding-box;
    -webkit-border-radius: 5rpx;
    -moz-border-radius: 5rpx;
    border-radius: 5rpx;
    min-height: 28rpx;
  }
  
::-webkit-scrollbar-thumb:hover {
    background-color: #c6a04d;
    -webkit-border-radius: 5rpx;
    -moz-border-radius: 5rpx;
    border-radius: 5rpx;
  }