【问题标题】:how to set scrollbar image using css?如何使用css设置滚动条图像?
【发布时间】:2020-11-06 09:01:07
【问题描述】:

我正在尝试制作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 滚动条?让它看起来很棒

【问题讨论】:

    标签: html jquery css scroll flexbox


    【解决方案1】:

    这是你需要的吗?

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

    【讨论】:

      猜你喜欢
      • 2010-10-18
      • 1970-01-01
      • 2011-09-04
      • 1970-01-01
      • 2019-05-15
      • 1970-01-01
      • 2019-01-14
      • 1970-01-01
      • 2013-12-31
      相关资源
      最近更新 更多