CSS3自定义滚动条样式 -webkit-scrollbar

最新推荐文章于 2024-02-24 09:52:08 发布

xuqing1226

最新推荐文章于 2024-02-24 09:52:08 发布

阅读量246

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/xuqingbaobao/article/details/88309028

版权

本文介绍了如何使用CSS3的伪元素`::-webkit-scrollbar`来定制滚动条的样式。内容包括滚动条的基本组成、各部分的样式设置，以及如何改变滚动条的宽度、滑块颜色、圆角和应用图片，以实现个性化设计。示例代码展示了不同样式的效果。

摘要由CSDN通过智能技术生成

ex:水平滑动不显示滚动条
html代码：

<div class="topSearch"   v-if="show">
      <span>热搜：</span>
      <div class="hotWords">
        <router-link ref="vis" @click.stop.prevent="topVisible" class="hotWord" :to="{path: '/goods/list', query: {keyword: item.hotWord}}" v-for="(item, index) in hotSearch" :key="index">
          {
  {item.hotWord}}
        </router-link>
      </div>
    </div>

css代码：

.topSearch{
  position: relative;
  top: 98px;
  background-color: transparent;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-left: 20px;
  color: #fff;
  font-size: 22px;
}
  .topSearch::-webkit-scrollbar{
    display: none
  }

补充：
当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过