很简单的几行代码

<!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. Echarts图表legend的排版问题（转载）

    来源:https://blog.csdn.net/david_jiahuan/article/details/80096922 案例一 项目中现有样式: 客户需求:将图例分为两列,并且上下两列的图例要 ...

  2. 【C#】list 去重（转载）

    Enumerable.Distinct 方法 是常用的LINQ扩展方法,属于System.Linq的Enumerable方法,可用于去除数组.集合中的重复元素,还可以自定义去重的规则. 有两个重载方法 ...

  3. [android] 采用layoutInflater打气筒创建一个view对象

    上一节知道了ListView的工作原理,数据也展示出来了,但是TextView显示的非常难看,如果想美化一下,就先创建好一个布局出来,这个布局采用了两层LinearLayout嵌套,外层的水平方向,内 ...

  4. (9)Microsoft office Word 2013版本操作入门_文本框_word排版

    1.插入文本框 :[插入]---[文本框]可以自己画,也可以选择已有的模板 2.文本框设置 :点中文本框选择[格式]---[对齐文本]可以让文字上下居中,[形状填充]填充不同的颜色.[形状轮廓]可以改 ...

  5. js 两数组去除重复数值

    //两数组去除重复数值 mergeArray: function(arr1, arr2) { for (var i = 0; i < arr1.length; i++) { for (var j ...

  6. vue-cli中安装方法

    源:http://www.cnblogs.com/jn1223/p/6656956.html vue-cli中安装方法   vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装 ...

  7. 简单选择排序算法的C++实现

    简单选择排序采用最简单的选择方法,即在剩余序列中选出最小(或最大)的关键字,和剩余序列的第一个关键字交换位置,依次选择下去,直至使整个序列有序. 算法中两层循环的执行次数和初始序列没有关系,第二层循环 ...

  8. 改变RadioButton的文字位置以及距离

    在默认情况下,RadioButton的 文字位置和文字的距离是不变的,为了可以改变它,我们可以用以下的方法. 1.改变文字的位置 android:button="@null" // ...

  9. 全参考视频质量评价方法（PSNR，SSIM）以及与MOS转换模型

    转载处:http://blog.csdn.NET/leixiaohua1020/article/details/11694369 最常用的全参考视频质量评价方法有以下2种: PSNR(峰值信噪比):用 ...

  10. oracle测试环境表空间清理

    测试场景下,使用的oralce遇到表空间的占用超大,可以采用如下的方式进行空间的清理 首先使用sqlplus连接数据库sqlplus sys/password@orcl as sysdba 之类进行数 ...