随着互联网的发展,人们对页面的要求越来越高,不只是功能好用,而且还要颜值高。前端开发人员对于浏览器的滚动条并不陌生,当自带的一些滚动条无法满足我们的审美时,你知道如何用CSS修改浏览器滚动条的样式吗?今天就给大家介绍如何设置div滚动条样式。有需要的小伙伴可以参考一下。
我们在自定义滚动条样式前,首先要了解滚动条的结构。通俗来讲,滚动条由两部分组成:一部分是可以滑动的部分,我们称它为滑块;另一部分是滚动条的轨道,也就是滑块的轨道,一般来说,为了美观,滑块的颜色要比轨道的颜色深一些。
打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)
首先介绍滚动条相关的CSS代码,以及他们的含义
::-webkit-scrollbar:指滚动条整体部分,它的属性有width,height,background等
::-webkit-scrollbar-button : 指滚动条两边的按钮。当不需要时可以用display:none将其隐藏
::-webkit-scrollbar-track :指外层轨道部分,当不需要时可以用display:none将其隐藏,也可以添加你想要的颜色
::-webkit-scrollbar-track-piece :指内层轨道部分,即滚动条中间的部分
::-webk