如何使用css设置滚动条图像？

Question

我正在尝试制作custom scrollbar 我发现scrollbar 的图像在背景为white 时工作正常。但是当背景为back 时，我的滚动条不显示（因为两者具有相同的颜色） .我们可以得到white滚动条的背景图片吗？我将从那里得到white scrollbar image 的base 64 格式。

这是我的代码 https://jsbin.com/nivepoyoye/edit?html,css,output

<div class="abc pqr" style="background:#000">
    asdasdasdasdasdasdasdasdasdasdasdasdasdas
    sdasd
  </div>
  

我的滚动条没有显示

.pqr::-webkit-scrollbar-thumb {
        background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAALCAIAAADa28u7AAAABnRSTlMAAAAAAABupgeRAAAAEklEQVR4AWPAB8REhYEIjcIDADhRAXVLIXYqAAAAAElFTkSuQmCC');
        background-position:0 50%;
        background-repeat:repeat-x;
/*     background-color:#fff
     */ }

    .pqr::-webkit-scrollbar {
        height: 18px;
    }

我将从哪里获得 base64 中的 white 滚动条？让它看起来很棒

Answer 1

这是你需要的吗？

* {
  scrollbar-width: thin;
  scrollbar-color: red green;
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
  width: 12px;
}