很简单的几行代码

<!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. 31.QPainter-rotate()函数分析-文字旋转不倾斜,图片旋转实现等待

    在上章和上上上章: 28.QT-QPainter介绍 30.QT-渐变之QLinearGradient. QConicalGradient.QRadialGradient 学习了QPainter基础绘 ...

  2. java通过Access_JDBC30读取access数据库时无法获取最新插入的记录

    1.编写了一个循环程序,每几秒钟读取一次,数据库中最新一行数据 连接access数据库的方法和查询的信息.之后开一个定时去掉用. package javacommon.util; import jav ...

  3. Netty实战二之自己的Netty应用程序

    接下来我们将展示如何构建一个基于Netty的客户端和服务器,程序很简单:客户端将消息发送给服务器,而服务器再将消息回送给客户端,这将是一个对你而言很重要的第一个netty的实践经验. 1.设置开发环境 ...

  4. sqoop将mysql数据导入hbase、hive的常见异常处理

    原创不易,如需转载,请注明出处https://www.cnblogs.com/baixianlong/p/10700700.html,否则将追究法律责任!!! 一.需求: 1.将以下这张表(test_ ...

  5. python基础学习（八）元组

    元组的定义 Tuple(元组)与列表类似,不同之处在于元组的 元素不能修改 元组 表示多个元素组成的序列 元组 在 Python 开发中,有特定的应用场景 用于存储 一串 信息,数据 之间使用 , 分 ...

  6. MySQL事务(学习笔记)

    MySQL事务主要用于处理操作量大,复杂度高的数据.比如说,在人员管理系统中,你删除一个人员,你即需要人员的基本资料,也要删除和该人员相关的信息,如信箱,文章等等,这样,这些数据库操作语句就构成一个事 ...

  7. Redis学习一(基础入门).

    一.前言 Redis是一个开源的使用ANSI C语言编写.遵守BSD协议.支持网络.可基于内存亦可持久化的日志型.key-Value 的数据库.并提供多种语言的API. 通常,Redis 将数据存储于 ...

  8. 三问助你Fundebug

    译者按: Debug也要三省吾身! 原文: Three Questions About Each Bug You Find 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版 ...

  9. 去除bootstrap默认的input和选中时的样式

    input默认样式除border外, 还有一个阴影效果box-shadow:选中时同样有阴影效果. input,input:focus{ border: none !important; box-sh ...

  10. HtmlAgilityPack 的东西

    之前都是用正则抓取页面,本人正则不咋地,有些东西用抓取来很费劲,呵呵 在网上看到别人推荐一个 HtmlAgilityPack 的东西,网上找了资料,自己写了个抓取网页的例子,框架用的ASP.NET M ...