浏览器滚动条overlay悬浮效果的介绍及采坑指南-一一网

前言

最近做项目的时候，有一个列表场景在滚动条出现的时候会挤压列表内容的宽度，而且UI设计的滚动条是在用户鼠标移动到列表区域才出现的，这样在鼠标移入/移出的时候列表区域会有一个收缩/恢复的变化，视觉上看会有一种抖动的感觉。设计看了，摇摇头，觉得不太OK。作为一名靠谱的前端攻城狮，我只能采用各种优化方案进行优化，最终让设计小姐姐露出欣慰的微笑~

使用overlay

翻了下mdn的文档，看到overflow属性有一个叫做overlay的值，虽然平时很少看到有人使用，但看文档介绍仿佛是我想要的效果。直接上效果。

// html
<html>
  <body>
     <div class="scrollbar">
      <div class="content-list">
        <div>this is a item hahaha</div>
        <div>this is a item hahaha</div>
        <div>this is a item hahaha</div>
        <div>this is a item hahaha</div>
        <div>this is a item hahaha</div>
        <div>this is a item hahaha</div>
        <div>this is a item hahaha</div>
        <div>this is a item hahaha</div>
        <div>this is a item hahaha</div>
        <div>this is a item hahaha</div>
        <div>this is a item hahaha</div>
        <div>this is a item hahaha</div>
        <div>this is a item hahaha</div>
        <div>this is a item hahaha</div>
      </div>
    </div>
  </body>
</html>
复制代码

// css
.scrollbar {
  height: 180px;
  width: 165px;
  background: yellow;
  // 这里设成auto/scroll的话，滚动条会占据列表的宽度，导致列表内容被挤压。
  // 设成overlay的话滚动条会浮在内容是，不会被挤压。
  overflow: overlay;
  //overflow: auto;
}

.scrollbar::-webkit-scrollbar {
  -webkit-appearance: none;
  background: rgba(255,0,0,0);
  width: 8x;
  height: 8x;
}
.scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255,0,0,0.6);
  width: 8x;
  display: none;
}
.scrollbar:hover::-webkit-scrollbar-thumb {
  display: block;
  width: 8x;
}
.scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
  display: none;
}
.scrollbar:hover::-webkit-scrollbar-track {
  display: block;
}

.content-list > div {
  border-bottom: 1px solid;
}
复制代码

overflow: overlay;的效果：

overflow: auto;的效果：

Nice！果然是我想要的效果，看一下文档描述，居然是个实验性的且废弃的样式。caniuse上看，目前应该只有chrome兼容。

这么看来这个牛逼的属性在基于chromium的浏览器下是ok的，但是其他浏览器就不行。试了下，safari下会退化成auto的效果。在firefox下比较惨，直接木有滚动条。。。
看来这个属性虽然好用，但是不完美，只能再看看其他的方案了。

自绘滚动条

想了下，如果自己用几个div来模拟滚动条然后自己计算滚动条相关位置和滚动范围等应该可行的。而且这样滚动条的所有样式就都在自己的掌控之中。然后就在网上找了下有木有先驱，一搜好家伙，果然有！找到一个perfect-scrollbar看起来还不错，可以完美解决我的问题。
当然出于对浏览器爸爸的敬畏，我们目前是在chromium内核的浏览器下使用overlay属性来解决，其他浏览器则使用perfect-scrollbar来实现。
大神们如果有其他方案，欢迎留言一起交流~

文章版权归作者所有，未经允许请勿转载。

THE END

前端