首先得说一句 我不懂CSS的写法之类的 这段CSS也是在网上找的 所以有更先进的需求的话 我肯定不能满足你们了 不好意思
效果图在10楼有人上了 我这边不管怎么弄 上传图片都卡在96% 而且不翻wall不能回帖 翻wall的情况下 上论坛这个慢啊 所以 大家去看这个图吧http://bbs.kafan.cn/forum.php?mo ... &fromuid=487958
大家都知道哈 chrome能自定义的东西比较少 不像FF或者opera那样 几个样式 或者脚本 就能把浏览器改成任何想要的样子 不过 今天我抽时间研究了一下 发现自定义个滚动条还是可以的 毕竟对于chrome来说 UI上的东西本来就很少 标签页 可以通过主题修改 那么滚动条 就可以通过CSS修改了

  1. ::-webkit-scrollbar
  2. {
  3. width: 6px;
  4. height: 6px;
  5. }
  6. ::-webkit-scrollbar-track-piece
  7. {
  8. -webkit-border-radius: 6px;
  9. }
  10. ::-webkit-scrollbar-thumb:vertical
  11. {
  12. height: 5px;
  13. -webkit-border-radius: 6px;
  14. }
  15. ::-webkit-scrollbar-thumb:horizontal
  16. {
  17. width: 5px;
  18. -webkit-border-radius: 6px;
  19. }

复制代码

代码就是上面那些 我大概讲一下 这段代码的意思 看图 那个非常不好意思 卡饭不能上传图片 我只好外链一下

大家不要直接我用的这个参数 我就是随便给了几个 其实大家也可以看出来 如果把垂直和水平的参数设置成不一样的 那么垂直和水平的滚动条宽度啊 颜色啊 就会不同 其实好好修改一下 也是挺好看的

滚动条颜色设置(IE、chrome浏览器)

/*滚动条*/#nicescroll1{overflow-y:auto;overflow-x:hidden;height:580px;scrollbar-arrow-color:#302D30; /*三角箭头的颜色*/scrollbar-face-color:#000; /*立体滚动条的颜色(包括箭头部分的背景色)*/scrollbar-3dlight-color:#302D30; /*立体滚动条亮边的颜色*/scrollbar-highlight-color:#302D30; /*滚动条的高亮颜色(左阴影?)*/scrollbar-shadow-color:#302D30; /*立体滚动条阴影的颜色*/scrollbar-darkshadow-color:#302D30; /*立体滚动条外阴影的颜色*/scrollbar-track-color:#302D30; /*立体滚动条背景颜色*/scrollbar-base-color:#302D30; /*滚动条的基色*/}#nicescroll2{overflow-y:auto;overflow-x:hidden;height:396px;scrollbar-arrow-color:#302D30; /*三角箭头的颜色*/scrollbar-face-color:#000; /*立体滚动条的颜色(包括箭头部分的背景色)*/scrollbar-3dlight-color:#302D30; /*立体滚动条亮边的颜色*/scrollbar-highlight-color:#302D30; /*滚动条的高亮颜色(左阴影?)*/scrollbar-shadow-color:#302D30; /*立体滚动条阴影的颜色*/scrollbar-darkshadow-color:#302D30; /*立体滚动条外阴影的颜色*/scrollbar-track-color:#302D30; /*立体滚动条背景颜色*/scrollbar-base-color:#302D30; /*滚动条的基色*/}#commend_list{overflow-y:auto;overflow-x:hidden;height:229px;scrollbar-arrow-color:#f8f9fb; /*三角箭头的颜色*/scrollbar-face-color:#000; /*立体滚动条的颜色(包括箭头部分的背景色)*/scrollbar-3dlight-color:#302D30; /*立体滚动条亮边的颜色*/scrollbar-highlight-color:#302D30; /*滚动条的高亮颜色(左阴影?)*/scrollbar-shadow-color:#302D30; /*立体滚动条阴影的颜色*/scrollbar-darkshadow-color:#302D30; /*立体滚动条外阴影的颜色*/scrollbar-track-color:#f8f9fb; /*立体滚动条背景颜色*/scrollbar-base-color:#302D30; /*滚动条的基色*/} 
/*chrome滚动条*/
::-webkit-scrollbar-track-piece{
 -webkit-border-radius:0;
}
::-webkit-scrollbar{
 width:8px;
 height:8px;
}
::-webkit-scrollbar-thumb{
 height:50px;
 
 -webkit-border-radius:4px;
 outline-offset:-2px;
 border: 2px solid #000;
}
::-webkit-scrollbar-thumb:hover{
 height:50px;
 
 -webkit-border-radius:4px;}

[分享] 通过修改CSS自定义chrome滚动条样式的更多相关文章

  1. css修改整个项目的滚动条样式

    在项目中,滚动条不可避免的药出现.设置统一规范的滚动条也是必然.用一个独立的css文件即可修改整个项目中的滚动条样式 . scrollBar.css: /* 滚动条有滑块的轨道部分 */ ::-web ...

  2. css修改浏览器默认的滚动条样式

    //滚动条样式 ::-webkit-scrollbar { width: 10px; } /* 垂直滚动条的滑动块 */ ::-webkit-scrollbar-thumb:vertical { bo ...

  3. jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)

    系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...

  4. 在css中定义滚动条样式

    1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...

  5. css控制默认滚动条样式

    针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-t ...

  6. IE,Chrome滚动条样式CSS

    <style type="text/css"> *{ scrollbar-face-color:#F3F3F3; /*面子*/ scrollbar-arrow-colo ...

  7. CSS之设置滚动条样式

    因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...

  8. WPF 自定义ProgressBar滚动条样式

    一.前言 滚动条一般用于加载进度,我们在看视频的时候或者在浏览网页的时候经常能看到加载进度的页面.在程序开发中,默认的进度加载样式可能跟程序风格不太一样,或者加载进度的时候需要更改一下加载的样式.这个 ...

  9. css:改变滚动条样式

    以下亲测谷歌内核的浏览器有用,微软和火狐无效 body::-webkit-scrollbar {/*滚动条整体样式*/ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1 ...

随机推荐

  1. lua、python对比学习

    一.基本数据类型: lua:  nil(空).boolean(false和nil为假).number(数值).string(字符串).table(表).function(方法).thread (线程) ...

  2. Metasploit之后渗透攻击(信息收集、权限提升)

    利用永恒之蓝漏洞入侵Windows7 流程参考https://www.jianshu.com/p/03a1c13f963a,实在是太棒啦!!! 目标主机为win7(IP:192.168.1.102): ...

  3. Tomcat 8.5集群配置

    示例 <Cluster className="org.apache.catalina.ha.tcp.SimpleTcpCluster" channelSendOptions= ...

  4. Hibernate4.3基础知识2

    一.数据库的隔离级别   脏读 不可重复读 幻读 Read uncommited Y Y Y Read commited N Y Y Repeatable read N N Y Serializabl ...

  5. NN相关资源(持续更新)

    Iris数据介绍 http://www.cnblogs.com/Belter/p/8831216.html

  6. C++逐字输出函数

    void fun(string a) { for(int i=0;i<a.length();i++) { cout<<a[i]; usleep(10000); } cout<& ...

  7. 使用gettid() 注意事项

    gettid()这个函数不可以在程序中直接使用,它是Linux本身的一个函数, 但是:仅包含#include <sys/types.h>,然后使用,编译时会报该函数未定义之类的错误! 解决 ...

  8. Intel HEX格式

    来来 !! come baby  !  只强调一点这篇文章有checksum的算法,是我最喜欢地!! 参考:https://blog.csdn.net/extlife/article/details/ ...

  9. Arduino 串口的一些高级用法

    来源: 1.配置串口通信数据位.校验位.停止位 通常我们使用Serial.begin(speed)来完成串口的初始化,这种方式,只能配置串口的波特率. 而使用Serial.begin(speed, c ...

  10. 手把手教你安装TensorFlow2 GPU 版本

    参考博客:https://blog.csdn.net/weixin_44170512/article/details/103990592 (本文中部分内容引自参考博客,请大家支持原作者!) 感谢大佬的 ...