<!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. Python——selenium爬取斗鱼房间信息

    from selenium import webdriver import os import json import time class Douyu: def __init__(self): # ...

  2. IPython&Jupyter私房手册

    Jupyter是以Ipython为基础,可以极大的方便开发,对于如何使用,网上的资料都不太全.因此决定自己编写一个私房手册方便随时查找. 1. 安装和配置 安装不多说,不想折腾直接安装anaconda ...

  3. Query on a tree II 倍增LCA

    You are given a tree (an undirected acyclic connected graph) with N nodes, and edges numbered 1, 2, ...

  4. JAVA GET 和 POST 的区别

    GET 和 POST 的区别 GET请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:/test/demo_form.asp?name1=value1&name2=val ...

  5. window 系统 cygwin swool 问题

    cygwin 终端乱码  端口占用 查看 tcp  端口: netstat -tno  或者 netstat -an | grep 端口 杀死进程号 : kill   进程号 --->  143 ...

  6. LeetCode231.2的幂

    231.2的幂 描述 给定一个整数,编写一个函数来判断它是否是 2 的幂次方. 示例 示例 1: 输入: 1 输出: true 解释: 2^0 = 1 示例 2: 输入: 16 输出: true 解释 ...

  7. JavaScript笔记Array.filter(Boolean)

    ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素  (false, null, undefined, 0, NaN or an empt ...

  8. Linux 安装 Djiango

    yum 安装方法 以下安装位于 Centos Linux 环境下安装,如果是你的 Linux 系统是 ubuntu 请使用 apt-get 命令. 默认情况下 Linux 环境已经支持了Python. ...

  9. img的事件

    <img src="../images/clock.jpg" onload=alert('加载成功'); onerror=alert("加载失败");/& ...

  10. 113th LeetCode Weekly Contest Flip Equivalent Binary Trees

    For a binary tree T, we can define a flip operation as follows: choose any node, and swap the left a ...