很简单的几行代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    .out {

      width: 600px;

      height: 600px;

      margin: 100px auto;

      overflow-y: auto;

    }

    /* 滚动条整体样式(高宽分别对应横竖滚动条的尺寸) */

    .out::-webkit-scrollbar {

      width: 5px;

      height: 5px;

    }

    /* 滚动条里面小方块 */

    .out::-webkit-scrollbar-thumb {

      border-radius: 5px;

      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

      background: rgba(0,0,0,0.2);

    }

    /* 滚动条里面轨道 */

    .out::-webkit-scrollbar-track {

      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

      border-radius: 0;

      background: rgba(0,0,0,0.1);

    }

  </style>

</head>

<body>

  <div class="out">

    <p style="height:250px;background: #ccc;">段落一</p>

    <p style="height:250px;background: #eee;">段落二</p>

    <p style="height:250px;background: #ccc;">段落三</p>

  </div>

</body>

</html>

最终效果图：

css滚动条样式自定义的更多相关文章

  1. HTML+CSS 滚动条样式自定义 - 适用于 div,iframe, html 等

    友言:这两天被滚动条整的无与伦比,在此做下总结: 首先自定义浏览器滚动条的实现原理:计算浏览器滚动条的高度,层级1的高度与滚动条的总高度是一样的,通过相似比例计算: 浏览器滚动条总高度 :滚动条高度 ...

  2. css 滚动条样式

    1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...

  3. css滚动条样式修改

    .activeMoreBankList{ height: 188px; overflow-y: auto;} /*滚动条样式*/.activeMoreBankList::-webkit-scrollb ...

  4. CSS滚动条样式设置

    webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...

  5. CSS滚动条样式定制

    效果图如下 <!DOCTYPE html> <!-- saved from url=(0061)http://www.xuanfengge.com/demo/201311/scrol ...

  6. [CSS]滚动条样式设置

    概述 最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需要以滚动条的形式展现,当时也考虑了使用webbrower的滚动条 ...

  7. css滚动条样式

    1.横向滚动条:(abeamScroll) <div style="width:400px;height:200px;overflow-x:auto;overflow-y:hidden ...

  8. 使用css实现无滚动条滚动+使用插件自定义滚动条样式

    使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...

  9. 如何自定义CSS滚动条的样式？

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的 ...

随机推荐

  1. sql 新增 修改 删除 列操作

    IF COL_LENGTH('SYS_Department', 'CreatedBy') IS NOT NULL --判断 SYS_Department 中是否存在 CreatedBy 字段 EXEC ...

  2. C#基础知识总结(五)

    摘要 其他的数据类型:常量.枚举(enum).结构(struct).数组一.常量 语法:const 类型 变量名 = 变量值 常量称之为值不可变的变量! 在定义的地方赋值,其他的地方不能赋值. 常量变 ...

  3. 将汉字转化为拼音的js插件

    /*---------------------------------------------------------------- // 文件名:chinese2pinyin.js // 文件功能描 ...

  4. dll 已注册 检索 COM 类工厂中 CLSID 为 {XXXX-XXXX-XXX-XXXXX-XXX} 的组件时失败，原因是出现以下错误: 80040154。

    前几天碰到的问题,错误提示“ 检索 COM 类工厂中 CLSID 为 {XXXX-XXXX-XXX-XXXXX-XXX} 的组件时失败,原因是出现以下错误: 80040154.”,然而dll已注册,注 ...

  5. [PDOException] PDO::__construct(): php_network_getaddresses: getaddrinfo failed:

    执行数据迁移 php artisan migrate 报错: 网上很多资料说开启allow_open_url等其实没卵用...貌似问题出在dns上....原来数据库的配置是这样的 DB_CONNECT ...

  6. 易宝支付Demo,生产中封装成简洁的代付接口，不用request如何获取项目运行时的真实路径

    最近项目在做融360引流,涉及到了易宝支付的代扣和代付.易宝官方给出的demo只能简单运行,而且都是通过form表单的形式提交,返回XML格式.同时接口代码都写在了JSP中看起来不友好.项目在生成中想 ...

  7. 修改tomcat命令黑窗口的名字

    一.为什么要修改tomcat黑窗口的名字 同时启动多个tomcat时,不好区分,而给tomcat的命令窗口取名区分是个不错的选择,例如下面这个效果. 二.修改的方法 1.找到tomcat的bin目录下 ...

  8. 【Linux命令】ps命令

    ps命令介绍 用于报告当前系统的进程状态.可以搭配kill指令随时中断.删除不必要的程序. ps命令是最基本同时也是非常强大的进程查看命令,使用该命令可以确定有哪些进程正在运行和运行的状态.进程是否结 ...

  9. SQL多表联合查询(交叉连接，内连接，外连接)

    连接查询:     交叉连接:   交叉连接返回的结果是被连接的两个表中所有数据行的笛卡尔积,也就是返回第一个表中符合查询条件的数据航数乘以第二个表中符合,查询条件的数据行数,例如department ...

  10. BZOJ2199: [Usaco2011 Jan]奶牛议会(2-SAT)

    Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 559  Solved: 360[Submit][Status][Discuss] Descriptio ...