如何实现CSS3自定义滚动条样式

html-css06

如何实现CSS3自定义滚动条样式,第1张

在chrome下可以自定义滚动条样式,举个例子

::-webkit-scrollbar

{

  width: 6px

  height: 6px

}

::-webkit-scrollbar-track-piece

{

  background-color: rgba(204, 204, 204, 0.66)

  -webkit-border-radius: 0px

}

::-webkit-scrollbar-thumb

{

  border-radius: 6px

  -webkit-border-radius: 6px

  background-color: #7b7b7b

}

/*定义横向和纵向交点的样式*/

::-webkit-scrollbar-corner { background-color: transparent }

这里可以定义滚动条的粗细度和颜色等,至于更具体的诸如分别定义横竖滚动条样式等需要你自行修改。

另外也可以利用一些开源的滚动条插件来实现你需要的效果,比如我之前使用过的nicescroll.js,在浏览器兼容方面会好一些,但是可能会对系统的稳定性有影响,这个需要你权衡。

您好,我来为您解答:

利用CSS3的一些动画属性,我们可以让一些平凡的按钮变得生动有趣,提高用户体验。网上直接有代码可以下载。

如果我的回答没能帮助您,请继续追问。