如何实现CSS3自定义滚动条样式
在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,在浏览器兼容方面会好一些,但是可能会对系统的稳定性有影响,这个需要你权衡。
如何通过css更改滚动条样式
建议你贴图上来,因为出现原因的可能很多,比如代码格式不对或者代码位置放的不对再或者是css样式引用出错等等。
css代码怎样改变火狐浏览器中滚动条样式
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:一个轻量级的滚动到顶部插件
用css怎么设置div滚动条的样式,可改变大小的
overflow: auto; 在需要时内容会自动添加滚动条 overflow: scroll; 总是显示滚动条 overflow-x: hidden; 禁止横向的滚动条 overflow-y: scroll; 总是显示纵向滚动条width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]height: 120px; 设置区域的高度[像素/百分比等等]STYLEBODY {SCROLLBAR-FACE-COLOR: #f892cc; SCROLLBAR-HIGHLIGHT-COLOR: #f256c6; SCROLLBAR-SHADOW-COLOR: #fd76c2; SCROLLBAR-3DLIGHT-COLOR: #fd76c2; SCROLLBAR-ARROW-COLOR: #fd76c2; SCROLLBAR-TRACK-COLOR: #fd76c2; SCROLLBAR-DARKSHADOW-COLOR: #f629b9; SCROLLBAR-BASE-COLOR: #e9cfe0}/STYLESCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色 SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色 SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色 SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色 SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色 SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色 SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色 SCROLLBAR-BASE-COLOR: 滚动条的基本颜色自己定义滚动条的颜色。一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间。如:/*这里放注释的代码*/Body { scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/ scrollbar-face-color: #333; /*立体滚动条的颜色*/ scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/ scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/ scrollbar-track-color: #666; /*立体滚动条背景颜色*/scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/ Cursor:url(mouse.cur); /*自定义个性鼠标*/ }以上2项适用与body、div、textarea、iframe希望对你有所帮助。
css怎样设置滚动条的颜色及样式
写个实例demo吧不能光说不练。CSS也很简单。
/* 设置滚动条的样式 */::-webkit-scrollbar { width: 12px;}/* 滚动槽 */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;}/* 滚动条滑块 */::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4);}
如何用css控制浏览器滚动条
用CSS控制滚动条样式
1,Overflow内容溢出时的设置
overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置
以上三个属性设置的值为visible、scroll、hidden、auto
visible 默认值。使用该值时,无论设置的"width"和"height"的值是多少,其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll 无论内容是否超越范围,都将显示滚动条。 auto 当内容超出范围时,显示滚动条,否则不显示。
应用:
没有水平滚动条:
div style="overflow-x:hidden"test/div
没有垂直滚动条 :
div style="overflow-y:hidden"test/div
没有滚动条 :
div style="overflow-x:hidden;overflow-y:hidden" 或
style="overflow:hidden"test/div
自动显示滚动条:
div style="height:100px;width:100px;overflow:auto;"test/div
2,自己定义滚动条的颜色
我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间,如:/*这里放注释的代码*/
Body {
scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/
scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/}
以上2项适用与body、div、textarea、iframe
怎么用css设置火狐浏览器默认滚动条样式
scrollbar-3d-light-color 设置或检索滚动条亮边框颜色
scrollbar-highlight-color 设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色
scrollbar-face-color 设置或检索滚动条3D表面(ThreedFace)的颜色
scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色
scrollbar-shadow-color 设置或检索滚动条3D界面的暗边(ThreedShadow)颜色
scrollbar-dark-shadow-color 设置或检索滚动条暗边框(ThreedDarkShadow)颜色
scrollbar-base-color 设置或检索滚动条基准颜色。其它界面颜色将据此自动调整