<!DOCTYPE html>
<html lang="en">
      <head>
            <meta charset="UTF-8">
            <title>滚动条示例</title>
            <style type="text/css">
                  .nui-scroll {
                        margin-left: 100px;
                        border: 1px solid #000;
                        width: 200px;
                        height: 100px;
                        overflow: auto;
                  }
                  
                  .nui-scroll::-webkit-scrollbar {
                        width: 8px;
                        height: 8px;
                  }
                  /*正常情况下滑块的样式*/
                  
                  .nui-scroll::-webkit-scrollbar-thumb {
                        background-color: rgba(0, 0, 0, .05);
                        border-radius: 10px;
                        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
                  }
                  /*鼠标悬浮在该类指向的控件上时滑块的样式*/
                  
                  .nui-scroll:hover::-webkit-scrollbar-thumb {
                        background-color: rgba(0, 0, 0, .2);
                        border-radius: 10px;
                        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
                  }
                  /*鼠标悬浮在滑块上时滑块的样式*/
                  
                  .nui-scroll::-webkit-scrollbar-thumb:hover {
                        background-color: rgba(0, 0, 0, .4);
                        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
                  }
                  /*正常时候的主干部分*/
                  
                  .nui-scroll::-webkit-scrollbar-track {
                        border-radius: 10px;
                        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
                        background-color: white;
                  }
                  /*鼠标悬浮在滚动条上的主干部分*/
                  
                  .nui-scroll::-webkit-scrollbar-track:hover {
                        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
                        background-color: rgba(0, 0, 0, .01);
                  }
            </style>
      </head>
      <body>
            <div class="nui-scroll">
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <!--这里有好多上面这结构为了节省篇幅就省去了-->
            </div>
      </body>
</html>

前端给div加滚动条样式修改的更多相关文章

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

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

  2. chrome和IE下的滚动条样式修改

    火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html&g ...

  3. div 加滚动条

    div 加滚动条的方法: <div style="position:absolute; height:400px; overflow:auto"></div> ...

  4. div 加滚动条的方法

    div 加滚动条的方法: <div style="position:absolute; height:400px; overflow:auto"></div> ...

  5. scroll滚动条样式修改

    一般我们有两种情况会出现滚动条,一种是overflow,一种是使用scroll. 当我们需要改变这个滚动条样式的时候,我们需要做以下的修改: html: <div id="style- ...

  6. DIV 自定义滚动条样式

    当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义. 首先我们要了解滚动条.滚动条从外观来看是由两部分组成:1,可以滑动的部分 ...

  7. DIV 自定义滚动条样式（二）

    流浏览器自带的滚动条样式很丑,确实有必要美化. 滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深. 滚动条的css样式主 ...

  8. div 加滚动条 超过div宽度 自动换行 div居中

    一.div 中加滚动条 一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽 ...

  9. HTML 滚动条样式修改

    <style> .innerbox{ overflow-y: auto; background-color: #f8f8f8; height: 200px; padding: 10px; ...

随机推荐

  1. .Generator与其他异步处理方案

    1.Generator与其他异步处理方案 以前,异步编程的方法,大概有下面四种. 1.1 回调函数 JavaScript 语言对异步编程的实现,就是回调函数.所谓回调函数,就是把任务的第二段单独写在一 ...

  2. POJ-1321-棋盘问题（深搜）

    棋盘问题 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 65409   Accepted: 31227 Descriptio ...

  3. 在Ninject 向构造参数中注入具有相同类型的参数

    实际上这个有多种解决方法,加自定义Attribute,或Named(),但这些方式有一些侵入性,Named,要引用Ninject, 自定义Attribute,还要还要再写几行代码吗,所以使用下面的方法 ...

  4. elementtaryos root密码更改

    在elementtaryos 终端中使用root 账户但不幸忘记密码怎么办?请进行如下操作...... 1.进入高级选项选中recovery mode 2.按e编辑,找到recovery nomode ...

  5. [转][Java]使用Spring配合Junit进行单元测试的总结

    http://www.51testing.com/html/14/n-1408814.html 1.直接对spring中注入的bean进行测试(以DAO为例): 在测试类上添加@RunWith注解指定 ...

  6. C++_类入门3-嵌套类

    可以将类B声明在另一个类中.在另一个类A中声明的类B被称为嵌套类(nested class). 类A的成员函数可以创建和使用嵌套类B的对象. 当且仅当声明为公有部分时,才能在类A的外面使用嵌套类.而且 ...

  7. P3332 [ZJOI2013]K大数查询

    传送门 注意操作 $1$ 是在区间的每个位置加入一个数,不是加上一个值 相当于每个位置维护的是一个集合 显然树套树 一开始想的是区间线段树套权值线段树 发现这样询问区间第 $K$ 大时就要先二分答案再 ...

  8. 115th LeetCode Weekly Contest Check Completeness of a Binary Tree

    Given a binary tree, determine if it is a complete binary tree. Definition of a complete binary tree ...

  9. HDU - 4686 函数积的前缀和

    题意:求\(\sum_{i=0}^{n-1}a_ib_i\) 其中,\(a_i=A_xa_{i-1}+A_y,b_i=B_xb_{i-1}+B_y\) 构造矩阵分别维护\(a_ib_i,a_i,b_i ...

  10. js中点和向量的基本方法

    var Point=function(x,y){ this.x= Number(x.toFixed(2))||0; this.y=Number(y.toFixed(2))||0; } Point.pr ...