很简单的几行代码

<!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. IIS Tomcat共享80端口

    为什么有这种需求, 原因是这样的, 公司有一个Java的web项目,在另一台服务器A上,最近老板一时兴起,想把他合并到这台稳定点的服务器B上,服务器B上使用IIS来寄宿asp.net 网站, 怎么办呢 ...

  2. 正则表达式之 \b

    引用网上一段话: \b 是正则表达式规定的一个特殊代码(好吧,某些人叫它元字符,metacharacter),代表着单词的开头或结尾,也就是单词的分界处.虽然通常英文的单词是由空格,标点符号或者换行来 ...

  3. IntelliJ IDEA生成live template（代码模板）

    IntelliJ IDEA生成live template(代码模板) 一.进入live template模板 快捷键:Ctrl+Shift+A进入Find Action,输入live template ...

  4. linux服务器重启指令

    一.Linux 的五个重启命令 1.shutdown 2.poweroff 3.init 4.reboot 5.halt 二.五个重启命令的具体说明 shutdown reboot 在linux下一些 ...

  5. IO学习二（节点流）

    1.流的分类 按照数据流向的不同:输入流和输出流 按照处理数据的单位不同:字节流((非文本文件)视频.音频.图像).字符流(文本文件) 按照角色的不同:节点流和处理流 2.IO体系 抽象基类 节点流 ...

  6. 微信小程序-查询快递

    1.新建快速启动项目 2.在设置里面勾选不校验合法域名,以防编译报错 3.在app.json中改一下窗口表现:app.json—"navigationBarTitleText": ...

  7. arcgis建立拓扑分析(检验矢量图)

    目的:矢量图画好后,检查是否有伪节点,悬挂节点等,线要素和面要素都可以检查.伪节点,两条线应该相交但是画的没相交:悬挂节点,两条线看似相交了但是没有节点,因此路径不同(类似于高架桥和交叉口,悬挂节点就 ...

  8. ajax post 提交数据和文件

    方式一:常用的方式是通过form.serialize()获取表单数据,但是,这样有个弊端,文件不能上传 $.ajax({ url:'/communication/u/', type:'POST', d ...

  9. 算法：用两个栈来实现一个队列，完成队列的Push和Pop操作。 队列中的元素为int类型。

    算法:用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型.<剑指offer> 利用栈来进行操作,代码注释写的比较清楚:首先判断两个栈是否是空的:其次当栈二 ...

  10. matlab练习程序（点云表面法向量）

    思路还是很容易想到的: 1.首先使用KD树寻找当前点邻域的N个点,这里取了10个,直接调用了vlfeat. 2.用最小二乘估计当前邻域点组成的平面,得到法向量. 3.根据当前邻域点平均值确定邻域质心, ...