HTML5技术

CSS3特性修改(自定义)浏览器默认滚动条 - 玩世不恭、

字号+ 作者:H5之家 来源:H5之家 2017-01-16 13:00 我要评论( )

前言:我们做前端时,会遇到一些需求,要求把默认浏览器的滚动条样式给改写了,诶。好好的改它干啥了,也带不来用户体验,就是好看点嘛!实现原理其实是用了伪元素,webkit的伪元素实现很强,可以把滚动条当成一个页面元素来定义,再结合一些CSS3属性,比如

前言:我们做前端时,会遇到一些需求,要求把默认浏览器的滚动条样式给改写了,诶。好好的改它干啥了,也带不来用户体验,就是好看点嘛!实现原理其实是用了伪元素,webkit的伪元素实现很强,可以把滚动条当成一个页面元素来定义,再结合一些CSS3属性,比如圆角、渐变、rgba等等。最常见的伪元素,我们最熟悉的元素之前和元素之后(::before/::after)【伪类(:hover/:link)】。这里写了一个Demo,来看看...

一、HTML

<div></div>

二、CSS 

<style> .banner_box { width: 100%; height: 2000px; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.6); -webkit-border-radius: -moz-border-radius: -o-border-radius: border-radius: 5px; } ::-webkit-scrollbar-button { -webkit-box-shadow: inset 0 0 6px rgba(85,85,85,1); background-color: #555; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1); background-color: #F5F5F5; } </style>

 

 三、结果

 

总结:这种CSS特性,可惜不被IE和火狐兼容,其他的都能看到结果,另外还有一种办法,通过div去改写滚动条。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 28个你必须知道的HTML5的新特性,技巧以及技术 - Sanplit

    28个你必须知道的HTML5的新特性,技巧以及技术 - Sanplit

    2017-01-05 08:00

  • CSS3之3d变换与关键帧 - TheWinds

    CSS3之3d变换与关键帧 - TheWinds

    2016-12-29 14:00

  • CSS3之过渡及2D变换 - TheWinds

    CSS3之过渡及2D变换 - TheWinds

    2016-12-29 12:01

  • CSS3之新UI方案 - TheWinds

    CSS3之新UI方案 - TheWinds

    2016-12-26 18:04

网友点评