<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         body{

             /*ie下修改滚动条样式，在webkit内核浏览器无效*/

             /*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);自定义个性鼠标*/

         }

         div{

             height:100px;

             width:200px;

             overflow:auto;

         }

         td{

             display:inline-block;

             margin:10px 20px;

         }

         /*webkit内核浏览器修改滚动条样式*/

         ::-webkit-scrollbar {

             width: 8px;

         }

         ::-webkit-scrollbar-thumb {

             border-radius: 10px;

             background: rgba(0,0,0,0.2);

         }

         ::-moz-scrollbar {

             width: 8px;

         }

         ::-moz-scrollbar-thumb {

             border-radius: 10px;

             background: rgba(0,0,0,0.2);

         }

         /*当前窗口未激活的情况下*/

         ::-webkit-scrollbar-thumb:window-inactive {

             background: rgba(0,0,0,0.1);

         }

         /*hover到滚动条上*/

         ::-webkit-scrollbar-thumb:vertical:hover{

             background-color: rgba(0,0,0,0.3);

         }

         /*滚动条按下*/

         ::-webkit-scrollbar-thumb:vertical:active{

             background-color: rgba(0,0,0,0.7);

         }

     </style>

 </head>

 <body>

     <div>

         <table>

             <tr>

                 <td>12345</td>

                 <td>12345</td>

             </tr>

             <tr>

                 <td>12345</td>

                 <td>12345</td>

             </tr>

             <tr>

                 <td>12345</td>

                 <td>12345</td>

             </tr>

             <tr>

                 <td>12345</td>

                 <td>12345</td>

             </tr>

         </table>

     </div>

 </body>

 </html>

如有错误，请您指正！

overflow滚动条样式设置，ie和webkit内核的更多相关文章

  1. CSS文本溢出效果&滚动条样式设置

    一.文本溢出 1.overflow: hidden;  超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...

  2. CSS滚动条样式设置

    webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...

  3. [CSS]滚动条样式设置

    概述 最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需要以滚动条的形式展现,当时也考虑了使用webbrower的滚动条 ...

  4. listview-fading 滚动条样式设置

    fadingEdge-属性用来设置拉滚动条时 ,边框渐变的方向.它有三个属性值可以设置 none:(边框颜色不变) horizontal:(水平方向颜色变淡) vertical:(垂直方向颜色变淡). ...

  5. vue 滚动条样式设置

      App.vue 文件下加入下面css   // 滚动条宽度 ::-webkit-scrollbar{   width: 6px; } /* 定义滚动条轨道 */ ::-webkit-scrollb ...

  6. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

  7. CSS3自定义滚动条样式-webkit内核

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

  8. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  9. 自定义滚动条样式-兼容IE

    滚动条样式设置 html部分: 1 <div id="scroll" style="width: 500px; height: 300px; border: 2px ...

随机推荐

  1. Python学习-day7 类 部分socket

    这周还是继续关于类的学习,在面向对象的学习过程中又学习了网络编程,并且提交了编写FTP的作业. 复习一下类的相关概念和定义 类      属性           实例变量:内存中           ...

  2. 【Luogu】P1903数颜色（带修改莫队）

    题目链接 带修改莫队模板. 加一个变量记录现在是第几次修改,看看当前枚举的询问是第几次修改,改少了就改过去,改多了就改回来. 话说我栈用成队列了能过样例?!!!! 从此深信一句话:样例是出题人精心设计 ...

  3. 【Luogu】P2473奖励关（期望DP）

    题目链接 逆推期望DP.设f[i][j]为1~i-1中吃到的宝物集合为j,在i~k轮能得到的最大期望分数. 如果不吃显然f[i][j]+=f[i+1][j]/n 如果吃就是f[i][j]+=max(f ...

  4. 用meta标签让网页用360打开时默认为极速模式

    最近做项目,用360浏览器访问自己的本地网页,发现都是默认在兼容模式下打开,做的淡入淡出轮播效果在兼容模式下看时,感觉切换很生硬.百度,发现360官网帮助里有说明用meta标签控制浏览器内核,网址为h ...

  5. 用jQuery实现搜索框的过滤效果

    遇到的问题: 1.动态添加了某些元素,在动态添加的某个元素上绑定事件失效 原因:因为需要绑定的元素的直接父元素也是动态添加的解决:向上为上一级父元素绑定事件 $(".check-box&qu ...

  6. 洛谷P2664 树上游戏 【点分治 + 差分】

    题目 lrb有一棵树,树的每个节点有个颜色.给一个长度为n的颜色序列,定义s(i,j) 为i 到j 的颜色数量.以及 现在他想让你求出所有的sum[i] 输入格式 第一行为一个整数n,表示树节点的数量 ...

  7. vue-resource发送multipart/form-data数据

    //add headers this.$http.post('/api', data, { headers: { 'Content-Type': 'multipart/form-data' } }) ...

  8. AIX 常用命令 第一步（uname，lspv）

    如何知道自己在运行单处理器还是多处理器内核? /unix 是指向已启动内核的符号链接.要了解正在运行什么内核模式,可输入 ls -l /unix 并查看 /unix 链接到什么文件.下面是 ls -l ...

  9. 报错：java.lang.IllegalStateException

    java.lang.IllegalStateException: BeanFactory not initialized or already closed - call '“refresh”' be ...

  10. 2018.7.31 Noip2018模拟测试赛（十六）

     日期: 七月最后一天  总分: 300分  难度: 提高 ~ 省选  得分: 30分(少的可怜) 我太弱了:(题目目录) T1:Mushroom追妹纸 T2:抵制克苏恩 T3:美味 失分分析:(QA ...