怎么修改网页默认滚动条以及CSS滚动条样式设置方法

网站运营 2020-02-24

在浏览网页的时候,我们可以看到网页右边会有一个滚动条,这个默认的滚动条是灰色的长条,不少站长为追求个性,通常会修改这个滚动条样式。下面橘子君为大家分享的便是CSS滚动条设置方法,因为是通过CSS来修改样式,所以此方法可以通用到其他网站。

首先了解一下滚动条常用属性

::-webkit-scrollbar :滚动条整体部分,可自定义滚动条的大小等。

::-webkit-scrollbar-track :外层轨道,也可以添加背景图片,颜色改变显示效果。

::-webkit-scrollbar-track-piece :内层轨道,可增加滚动框背景样式。

::-webkit-scrollbar-thumb :滚动条里面可以鼠标点击拖动的那部分。

下面我们来看下CSS滚动条设置的方法,方法很简单,站长只需在网站的CSS文件中添加以下代码,通常是style.css文件。

在以上CSS滚动条设置样式前,站长可以先做好备份。添加上面的代码后我们会发现滚动条变细,鼠标放上去拖动是红色,平时滚动条的颜色是蓝色的,站长可将颜色#018EE8替换,建议用配色图挑选合适的颜色,喜欢的朋友可以动手试试。

转至橘子园:尹华峰

评论 (0)
    Top