<!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. Django底层原理简介与安装

    Django环境目录搭建一栏: 利用wsgiref模块封装好的socket搭建服务端: #利用wsgiref模块封装好的socket演示操作(例如accept\recv) #也可以实现socket服务 ...

  2. 动态方式破解apk进阶篇(IDA调试so源码)

    动态方式破解apk进阶篇(IDA调试so源码) 来源 https://blog.csdn.net/qq_21051503/article/details/74907449 下面就说关于在IDA中And ...

  3. ACM程序设计选修课——1031: Hungar的得分问题(二)（杨辉三角+二进制转换）

    1031: Hungar的得分问题(二) 时间限制: 1 Sec  内存限制: 64 MB 提交: 15  解决: 10 [提交][状态][讨论版] 题目描述 距离正式选秀时间越来越近了,今天Hung ...

  4. 如何用1个小时了解JSON

    W3school ↑↑↑学这个,1个小时够了.下面是节选: 代码例子1: <html> <body> <h2>在 JavaScript 中创建 JSON 对象< ...

  5. Java数据库连接JDBC用到哪种设计模式?

    还没看桥接模式,占tag 桥接模式: 定义 :将抽象部分与它的实现部分分离,使它们都可以独立地变化. 意图 :将抽象与实现解耦. 桥接模式所涉及的角色 1.  Abstraction :定义抽象接口, ...

  6. 用promise做图片的预加载

    var url='jsonp-master/0.jpg' var url1='jsonp-master/1.jpg' var url2='jsonp-master/2.jpg' var img=doc ...

  7. android 设置app root权限简单方法

    vim frameworks/base/core/java/com/android/internal/os/ZygoteConnection.java +709 private static void ...

  8. Python入门--16--模块

    模块的定义: 模块是一个包含所有你定义的函数和变量的文件,其后缀是.py.模块可以被别的程序引入,以使用该模块中的函数等功能 比如 import random secret=random.randin ...

  9. Scrapy学习-11-Selector对象使用

    Selector使用 使用背景 我需要使用类似spider项目中,response使用的xpath和css获取页面指定数据,但因为爬取页面较小我们不想创建一个spider项目时,就可以使用scrapy ...

  10. 洛谷——P2701 [USACO5.3]巨大的牛棚Big Barn

    P2701 [USACO5.3]巨大的牛棚Big Barn 题目背景 (USACO 5.3.4) 题目描述 农夫约翰想要在他的正方形农场上建造一座正方形大牛棚.他讨厌在他的农场中砍树,想找一个能够让他 ...