模拟 Tim 实现自定义的且可动态显示的滚动条

前言

这两天在写一个基于 SpringBoot + Vue 简单聊天室样例，然后中间想要实现一个像 Tim 的消息滚动条，中间也查了一些资料，颇费周折，下面就介绍一下具体的思想思路，为了展示和理解方便，本文用原生 js 实现，本文所使用的完整代码也已上传到GitHub。

效果

在展示具体的代码思路之前，先展示一下最终的效果：

可以发现滚动条默认会出现末端，且滚动条也只有鼠标移到聊天区域时才会显示，下面就就介绍具体实现。

实现

滚动条样式实现

首先是滚动条样式的代码：

:root {
  --scroll-color: #0000;
}

.dialog .middle::-webkit-scrollbar {
  /*设置滚动条的宽度*/
  width: 8px;
}

.dialog .middle::-webkit-scrollbar-thumb {
  /*设置滚动条圆角*/
  border-radius: 4px;
  /*设置滚动条颜色*/
  background-color: var(--scroll-color);
}

.dialog .middle::-webkit-scrollbar-track {
  /*设置轨道颜色, 与背景色相同, 以便隐藏*/
  background: #fff;
}

进行以上设置后即可得到效果中的圆角滚动条，关于滚动条更多的属性控制以及含义，可以查看该链接，这里需要注意 ::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如 Chrome，Safari)可以使用。如果想要兼容 IE，可以看这篇文章，想要兼容 firefox，可以看这篇文章，这里不再具体介绍。

滚动条置底实现

想要让滚动条默认置底很简单，只需要下面两行 js 即可：

const mid = document.querySelector('.middle')
mid.scrollTop = mid.scrollHeight

滚动条动态显示实现

关于实现动态显示，我这里的实现思路是当鼠标移动到聊天区域，就将滚动条设为正常颜色，当鼠标移出聊天区域就将滚动条设为透明。最开始我是想通过获取 ::-webkit-scrollbar-thumb 这个伪类节点，然后在 onmouseover 和 onmouseout 两个鼠标事件中进行修改，代码如下：

const node = window.getComputedStyle(document.getElementsByClassName('middle')[0], '::-webkit-scrollbar-thumb')
node.setProperty('background-color', '#0000')

但是结果控制台报出了如下错误，提示无法修改只读属性：

只好放弃这种思路，然后由于当时在写 Vue 代码就想到了写两份 middle 及伪类样式代码（只有上述的 ::-webkit-scrollbar-thumb 的 background-color 不同），将鼠标的移入移出事件也改成了修改 :class="val" 中的 val 为 middle 或者是另一份 middle-transparent，然后尝试了一下，可行！但是看着重复的一堆代码，想到 DRY 原则，这些写实在不够优雅，然后思索一段时间，想到可以使用 CSS 的变量呀，将切换的颜色设为一个变量，然后修改这个变量的值就能实现动态显示，然后试了一下，可行，大功告成！代码如下：

:root {
  /*声明一个变量*/
  --scroll-color: #0000;
}

.dialog .middle::-webkit-scrollbar-thumb {
  /*设置滚动条颜色, 颜色上述声明的变量值*/
  background-color: var(--scroll-color);
}

// 鼠标移入移出事件调用方式: onmouseover="setColor('#cecdcd')"
function setColor(color) {
    document.documentElement.style.setProperty('--scroll-color', `${color}`)
}

总结

本文简单介绍了如何实现类似 Tim 的聊天室滚动条，在下一篇文章将会展示完整的基于 SpringBoot + Vue 的聊天室样例。