css+div如何美化滚动条,

html-css047

css+div如何美化滚动条,,第1张

调他的样式就可以了呀。

SCROLLBAR-FACE-COLOR(立体滚动条凸出部分的颜色)

SCROLLBAR-HIGHLIGHT-COLOR(滚动条空白部分的颜色)

SCROLLBAR-SHADOW-COLOR(立体滚动条阴影的颜色)

SCROLLBAR-ARROW-COLOR(上下按钮上三角箭头的颜色)

SCROLLBAR-BASE-COLOR(滚动条的基本颜色)

SCROLLBAR-DARK-SHADOW-COLOR(立体滚动条强阴影的颜色)

CSS无法控制滚动条的样式。这里推荐几块滚动条美化的插件给你。

1. Windows：全屏窗口滚动插件

该插件可以很好地实现全屏滚动，每滚动一次即为一屏。比如，用户浏览下一屏幕内容时，只需手动滚动到某一位置，该插件会自动滚动显示下一屏全部内容。对于浏览类似于PPT的内容时比较实用。

2. Jquery Scroll Follow：滚动跟随插件

该插件可以使DOM对象随着页面的滚动而移动。你可以设置滚动的速度、偏移等参数。

3. 列表滚动插件

该插件可以为任意列表添加上滚动效果。你可以自定义列表的滚动方向和滚动速度。

4. Sly：灵活的基于ITEM的滚动插件

SLY提供了很多基于项目（如图像/内容画廊）的滚动选项，支持水平和垂直方向的无限滚动。

5. Coverscroll

仿苹果的CoverFlow设计，支持滚动条、鼠标滚轮和手势来滚动查看。

6. Sticky

　该插件可以让你的页面中的任何元素在滚动过程中始终可见

7. Tiny Scrollbar：一个轻量级的JQUERY插件

8. Sticky Float：另一个滚动跟随插件

9. Page Scroller：漂亮实用的滚动导航

10. Custom Srollbar：自定义内容滚动条插件

11. Scroll Up：一个轻量级的滚动到顶部插件

在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，在浏览器兼容方面会好一些，但是可能会对系统的稳定性有影响，这个需要你权衡。