<!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. 数据结构54：平衡二叉树（AVL树）

    上一节介绍如何使用二叉排序树实现动态查找表,本节介绍另外一种实现方式——平衡二叉树. 平衡二叉树,又称为 AVL 树.实际上就是遵循以下两个特点的二叉树: 每棵子树中的左子树和右子树的深度差不能超过 ...

  2. Linux硬件信息采集

    dmidecode: 简介: dmidecode命令通过读取DMI数据库获取硬件信息并输出.由于DMI信息可以人为修改,因此里面的信息不一定是系统准确的信息 dmidecode遵循SMBIOS/DMI ...

  3. java基础_01

    一.java中的数据类型 1.基本数据类型:四类八种 byte(1),boolean(1),short(2),char(2),int(4),float(4),long(8),double(8); 2. ...

  4. Python web前端 06 运算符 循环

    Python web前端 06 运算符 循环 一.运算符 #JS六大数据类型 #number 数字 #string 字符串 #boolean 布尔型 #function 函数 #undefined 未 ...

  5. 【算法笔记】B1008 数组元素循环右移问题

    1008 数组元素循环右移问题 (20 分) 一个数组A中存有N(>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(≥0)个位置,即将A中的数据由(A​0​​A​1​​⋯A​N ...

  6. LightOJ - 1234 分块预处理

    求∑1/i,但是范围很大 和bitmap的想法一样,分个块,均摊复杂度就降下来了 //到底排行榜上的0ms是怎么做到的? #include<bits/stdc++.h> using nam ...

  7. P1077

    f[i][j]:i种花放j盆的方案数 #include<bits/stdc++.h> using namespace std; const int maxn = 3e2+11; const ...

  8. js去掉浏览器右键点击默认事件（+vue项目开启右键行为）

    js去掉浏览器右键点击默认事件 1.阻止整个页面所有的右击事件 document.oncontextmenu = function(){ return false;} 2.特定的区域/元素 docum ...

  9. Chess

    # coding=utf-8 import pandas as pd import numpy as np from sklearn import cross_validation import te ...

  10. NFS 网络文件系统

    1, NFS存储服务概念介绍    NFS是Network File System的缩写,中文意思是网络文件系统,    它的主要功能是通过网络(一般是局域网)让不同的主机系统之间可以共享文件或目录  ...