最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 模拟 Tim 实现自定义的且可动态显示的滚动条

    正文概述 掘金(庄周de蝴蝶)   2021-02-03   268

    前言

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

    效果

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

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

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

    实现

    滚动条样式实现

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

    :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的浏览器 (例如 ChromeSafari)可以使用。如果想要兼容 IE,可以看这篇文章,想要兼容 firefox,可以看这篇文章,这里不再具体介绍。

    滚动条置底实现

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

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

    滚动条动态显示实现

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

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

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

    只好放弃这种思路,然后由于当时在写 Vue 代码就想到了写两份 middle 及伪类样式代码(只有上述的 ::-webkit-scrollbar-thumbbackground-color 不同),将鼠标的移入移出事件也改成了修改 :class="val" 中的 valmiddle 或者是另一份 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 的聊天室样例。


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

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元