时间戳

首页 > 解决方案 > 滚动条的自定义 CSS

html - 滚动条的自定义 CSS

问题描述

我正在寻找定制的滚动条 css。请查看附件图像和下面的代码示例，我需要滚动条拇指上的三行，如下图所示。我们必须在拇指上添加图像还是可以使用任何渐变样式？任何帮助表示赞赏。

单击此处查看我正在寻找的示例图像

::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #6c7a85;
}

::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
  background-color: #64b6fd;
}
<div style="height: 300px;overflow: auto;width: 20%;;">
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
<p> Testing data </p>
</div>

标签： htmlcssbootstrap-4

解决方案

只需在里面设置背景图像::-webkit-scrollbar-thumb。

::-webkit-scrollbar-thumb {
 background: url('https://www.pngjoy.com/pngl/41/952512_hamburger-icon-menubuttom-hamburger-menu-icon-white-transparent.png') #64b6fd;
 background-size:8px 16px;
background-repeat:no-repeat;
background-position:center;
}

更新片段：

::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 background-color: #6c7a85;
}

::-webkit-scrollbar {
 width: 10px;
 background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
 background: url('https://www.pngjoy.com/pngl/41/952512_hamburger-icon-menubuttom-hamburger-menu-icon-white-transparent.png') #64b6fd;
 background-size:8px 16px;
background-repeat:no-repeat;
background-position:center;
}
<body>
<div style="height: 300px;overflow: auto;width: 20%;;">
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
  <p> Testing data </p>
</div>
</body>

推荐阅读