首页 > 教程 > 关键词 > CSS教程最新资讯 > 正文

CSS自定义滚动条样式

2011-04-06 09:30 · 稿源:前端观察,www.qianduan.net/

相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下。当然,兼容所有浏览器的滚动条样式目前是不存在的。

IE下的滚动条样式

IE是最早提供滚动条的样式支持,好多年了,但是其它浏览器一直没有支持,IE独孤求败了。

这些样式规则很简单:

scrollbar-arrow-color: color; /*三角箭头的颜色*/

scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/

scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/

scrollbar-highlight-color: color; /*滚动条的高亮颜色(左阴影?)*/

scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/

scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/

scrollbar-track-color: color; /*立体滚动条背景颜色*/

scrollbar-base-color: color; /*滚动条的基色*/

大概就这些,你也可以定义cursor来定义滚动条的鼠标手势。

这里,很久以前danger做了个基于Flash的可视化工具,简单但是好用:

选中CSS选项即可自动生成CSS样式,这里不再过多的介绍了。嗯,多谢大猫老湿推荐。

webkit的自定义滚动条样式

yes,这里才是今天要重点介绍的。

从上一部分的样式名中就可以看到,IE只能定义相关部分的color等属性,这样太不灵活了。

webkit最近实现了对滚动条的支持,先看一个简单的demo:

不过,webkit不再是用简单的几个CSS属性,而是一坨的CSS伪元素:

-webkit-scrollbar 滚动条整体部分

-webkit-scrollbar-button 滚动条两端的按钮

-webkit-scrollbar-track 外层轨道

-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)

-webkit-scrollbar-thumb (拖动条?滑块?滚动条里面可以拖动的那个,肿么翻译好呢?)

-webkit-scrollbar-corner 边角

-webkit-resizer 定义右下角拖动块的样式

通过这些伪元素,可以完全的重写一个网站的滚动条样式。

当然webkit提供的不止这些,还有很多伪类,可以更丰富滚动条样式:

:horizontal – horizontal伪类应用于水平方向的滚动条

:vertical – vertical伪类应用于竖直方向的滚动条

:decrement – decrement伪类应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)

:increment – increment伪类和decrement类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。)

:start – start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。

:end – 类似于start伪类,标识对象是否放到滑块的后面。

:double-button – 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮。

:single-button – 类似于double-button伪类。对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说,它表示内层轨道是否紧靠一个single-button。

:no-button – 用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,比如,滚动条两端没有按钮的时候。

:corner-present – 用于所有滚动条轨道,指示滚动条圆角是否显示。

:window-inactive – 用于所有的滚动条轨道,指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中,该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

另外,:enabled、:disabled、:hover 和 :active 等伪类同样可以用于滚动条中。

关于具体的demo,这里不再做了,网上已经有很多demo可以参考,比如,webkit官方的这个,具体的线上项目中也有现成的例子,比如,QQ空间的签到弹出框和豆瓣说的右侧详情栏(某条信息评论多的时候会显示)。

值得一提的是,webkit的这个伪类和伪元素的实现很强大,虽然类目有些多,但是我们可以把滚动条当成一个页面元素来定义,也差不多可以用上一些高级的CSS3属性,比如渐变、圆角、RGBa等等,当然有些地方也可以用图片,然后图片也可以转换成Base64,总之,可以尽情发挥了。

参考文章:

Styling Scrollbars

Creating custom scrollbars with CSS; How CSS isn’t great for every task

PS:中间部分术语翻译不到位,欢迎斧正。

(来源:前端观察

网友热搜:

  • 相关推荐
  • 大家在看
  • 和平精英SS8赛季手册寻宝行动全攻略 SS8赛季手册寻宝行动教程

    ​和平精英SS8赛季手册寻宝行动是新增的玩法,在其中可以获得非常多的奖励,但是一些玩家还不清楚怎么去玩寻宝行动,下面就来为大家分享一下和平精英SS8赛季手册寻宝行动全攻略。

  • DNF未央戡魔传未央幻境全攻略 未央幻境boss机制打法教程

    ​DNF未央戡魔传和未央幻境马上就要开放上线了,很多玩家还不清楚其中的四大凶兽饕鬄、混沌、梼杌和穷奇当大boss怎么打,下面就来为大家详细的介绍一下。

    dnf
  • 十万以下买什么车好?CS35PLUS不容错过

    对于大多数年轻人来说,购车预算往往在十万左右,而这一级别市场也成为竞争最激烈的细分市场。各家车企面对激烈的竞争,为了吸引消费者的关注,更是推出众多产品来抢占市场。不过也正是因为如此,很多消费者都纠结十万以下买什么车好?而作为国产车企中的老大哥,长安汽车旗下的CS35PLUS无疑是“十万以下买什么车好”的代表之一。初看长安CS35PLUS,你会觉得这款车与市场上其他同级产品有着很大不同。在长安CS35 PLUS身上,虽然也能看到一丝

  • StrategyAnalytics:超宽带芯片正在迈向成功

    Strategy Analytics最新发布的研究报告《UWB的回归:智能手机、汽车、工业等芯片预测》指出,2019年UWB(超宽带)系统和无线电芯片市场实现了飞跃;于此同时,新标准、芯片和应用意味着UWB的复兴。相关资料显示,UWB 技术是一种传输速率高,发射功率较低,穿透能力较强并且是基于极窄脉冲的无线技术。 StrategyAnalytics指出,苹果iPhone11机型采用了全新的U1超宽带无线电芯片以及用于远程无钥匙进入的新汽车标准推动?

  • Serverless架构的前世今生

    一、Serverless简介云计算的不断发展,涌现出很多改变传统IT架构和运维方式的新技术,而以虚拟机、容器、微服务为代表的技术更是在各个层面不断提升云服务的技术能力,它们将应用和环境中很多通用能力变成了一种服务。但无论这些技术应用在哪里,帮助企业“降本增效”是技术变革永恒的主题。Serverless架构的出现,带来了跨越式的变革。Serverless下主机管理、操作系统管理、基础软件的部署运维、资源分配和扩缩容能力全部由云厂?

  • 完美世界协助警方抓获CSGO外挂“Killer”制售团伙

    近日,CS:GO官方发文称,国服自上线以来,一直对作弊现象采取零容忍态度,坚决打击任何破坏游戏公平性的行为。近日,完美世界联合警方,成功打掉一个CS:GO外挂跨省制售团伙,抓获犯罪嫌疑人3名,其涉案金额高达百余万元。

  • 夸张!PS5游戏开发者盛赞SSD载入时间:读进度条不存在

    PS5最大的进步就是全新引入的高速SSD极大缩短了游戏加载时间。据外媒报道,近日,PS5的游戏开发者们在谈到PS5游戏加载体验时,纷纷大赞。其中,《NBA 2K21》在一段演示视频中展示,只需两秒即

  • 和平精英SS8赛季手册全部奖励汇总 SS8赛季手册皮肤奖励一览

    ​和平精英的SS8赛季手册马上就要上线了,很多玩家还不清楚此次S8的赛季手册有什么内容,所以今天就来为大家分享一下和平精英SS8赛季手册全部奖励汇总。

  • 沫子直播100个CSGO开箱,“脸太黑”差一点想卸载游戏

    斗玩网原创:不少喜欢看绝地求生直播的观众应该都会知道沫子这个妹子主播,她有着“绝地求生一姐”称号,不仅颜值不错,性格也十分好,更是通过自己出色的吃鸡技术赢得了大量玩家的关注。而最近沫子开始接触了CSGO这款游戏,不过在开箱环节却遭遇到了人生最“黑暗”时刻,甚至要气到打算卸载了游戏。

  • 杨柘出任小米集团中国区CMO 此前曾任魅族科技CSO

    今日,小米官方发布最新的人事信息称,任命杨柘为小米集团副总裁、中国区首席营销官(CMO),负责中国区市场营销战略制定、品牌建设等工作。

  • 美瑞时(MRISSTIME)发展历程

    美瑞时(MRISSTIME)是世界著名制表品牌之一,隶属于瑞士瑞时集团,瑞士瑞时集团创立于1978年,总部位于洛桑。集团旗下围绕世界名品钟表收藏及高雅格调文化生活方式交流的全球瑞时会俱乐部100余家,服务于全球近500万VIP客户。自19世纪中叶,Ammann家族开始从事钟表制造及收藏,拥有独立的制表企业及顶级腕表收藏艺术廊、钟表博物馆。Ammann家族所坚持的理念,为品牌开创独树一帜的视野,并留下经典隽永的传世作品。直到今天,美瑞时(MRISSTIM

  • 世纪互联蓝云获得红帽CCSP认证,携手助力企业数字化转型

    中国北京- 2020 年 6 月 3 日,上海蓝云网络科技有限公司(以下简称世纪互联蓝云),正式宣布加入红帽云计算及服务供应商认证(Red Hat Certified Cloud and Service Provider,CCSP)计划,让其客户和独立软件供应商(ISV)对使用红帽解决方案构建下一代IT项目充满信心。作为红帽云计算及服务供应商,世纪互联蓝云将整合平台资源,为用户提供自动化的购买及交付流程。无论是企业用户,还是渠道伙伴都可以通过世纪互联蓝云的线上自助系统

  • 女神异闻录4黄金版全boss攻略汇总 P4G全boss战详细攻略

    女神异闻录4黄金版中boss的数量还是非常多的,一些boss等级和人格面具等级没达到的话就会很难打,下面就来为大家分享一下女神异闻录4黄金版全boss攻略汇总。

  • 安信证书:申请免费SSL证书?别被“免费”蒙蔽双眼

    大部分企业网站和个人站长,已经认识到给网站安装SSL证书升级为HTTPS协议的重要性。作为国内领先的网站HTTPS解决方案提供商,安信证书专注提供SSL证书的申请和安装。但发现不少用户在咨询时开口便是有没有免费的SSL证书类似的问题,觉得还是有必要说一说这事儿。有没有免费的SSL证书?有。而且互联网上搜索相关内容就有超过上千万条结果。但你以为这些服务商都是做慈善的吗?俗话说,天上不会无故掉馅饼!天下没有免费的午餐。这是

  • Strategy Analytics:2G和3G用户占全球移动用户总数的46%

    6月19日消息,Strategy Analytics基于其免费报告《低成本4G手机:市场动态和机遇》,并结合最新的产业发展情况,分析了当前2G/3G的退网趋势和4G用户迁移机会。Strategy Analytics最新的无线市场预测,今年初,2G和3G用户占全球移动用户总数的46%,但贡献的收入却只占全球移动总收入的27%。到2023年,这一收入占比将下降到10%。非洲可以认为是一个特例,在这个地区,各国的ARPU值低于2美元,因此通过补贴促进用户迁移可

    2G 3G 4G
  • 兰宝行业精品案例—斗山、丰鲁VOCs废气治理项目作示范工程受电视环保栏目专访

    2019年6月,环保局出台《重点行业挥发性有机物综合治理方案》(环大气〔2019〕53号),明确提出深入实施VOCs精细化管控,推行“一厂一策”制度。年后,山东烟台全面开展了治理效果后评估工作。兰宝项目成示范工程受电视栏目专访 兰宝客户——斗山工程机械和丰鲁精细化工,作为废气治理重点行业(涂装和化工)内影响力企业,其优异的企业废气减排成效得到了环保局的高度认可。山东烟台电视台环保栏目将其作为示范性工程,进行了VOC

  • 手表品牌推荐| ISSEY MIYAKE三宅一生今夏最佳搭配

    腕表作为身份和品位的一个象征,其品牌和设计的重要性自然不言而喻,手表品牌推荐标准也不再像以前只认品牌,还要考虑产品本身的设计和品质。在当下这个普遍追热潮,出门就撞款的腕表市场环境下,不仅腕表设计缺乏新意,腕表品质和价格也往往难以让人满意,少有品牌能够保证手表的颜值与性价比兼顾。而在这几点上,ISSEY MIYAKE三宅一生做到了,不是在它享有盛誉的服装领域,而是ISSEY MIYAKE三宅一生手表品牌得到了行业和消费者的

  • 手表品质之选:ISSEY MIYAKE三宅一生1/6系列手表

    最近,国产职场剧频频刷屏,从收割一片好评的《欢乐颂》、《都挺好》、《前半生》再到最近毁誉参半的《安家》、《完美关系》。这些电视剧都反映出我国女性意识觉醒的趋势,但很遗憾,国产剧中所塑造的独立女性的形象仍是远不比CBS老牌美剧《傲骨之战》来的立体。 《The Good Fight(傲骨之战)》这部剧以戴安(Diane)、卢卡(Lucca)和玛娅(Maia)三个不同年龄段的女律师为主角,聚焦独立女性对于自己过往生活的自省和新生和探?

  • 内存新锐ZADAK首次转战SSD:性能、外观都没得挑

    ZADAK这个品牌大家可能还不太熟悉,此前专注于高性能内存,现在第一次转战SSD固态硬盘,而且出手不凡,首款产品“SPARK PCIe Gen 3x4 M.2 RGB SSD”从外观设计到规格性能都非常出色。

  • 携程BOSS直播13场总GMV破5亿元

    6月11日消息,昨日晚间,携程BOSS梁建章亮相西安W酒店。他COS成“秦始皇”,与COS成“历代帝王将相”的携程高管天团,一起为旅游复苏“带货”。梁建章COS成“秦始皇” 与美女直播助理“王母娘娘” 据统计,当晚观众达329万,比平日多50%;单场GMV创纪录地破9017万元,几乎是平日的一倍;至此,“携程BOSS直播”13场总GMV破5亿。直播中,携程的一众高管也是玩的很嗨。梁建章化身秦始皇:“西安是丝路起点。很多动物例如

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议