<!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-高级编程-05-异步IO

    [异步非阻塞IO] ------------------------------------------------------------------------------------------ ...

  2. 让boostrap的图片轮播支持滑动效果

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果. 然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有 ...

  3. js适配根字体大小

    方法一:<script>                (function (doc, win) {                var docEl = doc.documentElem ...

  4. linuxlinux0.11源码学习——bootsect.s学习

    由于一直想写一个自己的操作系统,网上推荐了<linux内核完全注释>.自学了一个星期,感觉这本书还是很好的,同时写下关于内核代码的理解,如果有什么不对的对方,欢迎大家一起来交流. 在内核引 ...

  5. R语言采坑系列——Warning message: In validDetails.polygon(x) : 强制改变过程中产生了NA

    用ggplot2的geom_density_2d时,总是不能填充图案,并报错: Warning message: In validDetails.polygon(x) : 强制改变过程中产生了NA 解 ...

  6. 【转】C#学习之用迭代器实现枚举器

    http://www.cnblogs.com/zouzf/archive/2012/02/22/2362954.html 本人初学C#,本文仅供个人整理思路用,那里说得不对,请大家多多指教,万分感激! ...

  7. 设计模式（五）原型模式 Prototype

    原型模式: 原型模式,是指基于一个已经给定的对象,通过拷贝的方式,创建一个新的对象,这个给定对象,就是“原型”. 在 Java 中,原型模式体现为 Object 的 clone() 方法. 所有类都可 ...

  8. cf496D Tennis Game

    Petya and Gena love playing table tennis. A single match is played according to the following rules: ...

  9. 马士兵hadoop第五课：java开发Map/Reduce（转）

    马士兵hadoop第一课:虚拟机搭建和安装hadoop及启动 马士兵hadoop第二课:hdfs集群集中管理和hadoop文件操作 马士兵hadoop第三课:java开发hdfs 马士兵hadoop第 ...

  10. net6：创建Membership对象数据源的代码

    原文发布时间为:2008-07-30 -- 来源于本人的百度文章 [由搬家工具导入] 添加了一个db的类作为了对象数据源： using System;using System.Data;using S ...