很简单的几行代码

<!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. mysql zip安装

    管理员运行cmd,进入bin目录1.在my.ini(mysql解压目录下)文件中复制下面内容 [client] port = 3306 [mysql] default-character-set=ut ...

  2. java多线程高并发

    旭日Follow_24 的CSDN 博客 ,全文地址请点击: https://blog.csdn.net/xuri24/article/details/81293321 “高并发和多线程”总是被一起提 ...

  3. JavaScript机器学习之KNN算法

    译者按: 机器学习原来很简单啊,不妨动手试试! 原文: Machine Learning with JavaScript : Part 2 译者: Fundebug 为了保证可读性,本文采用意译而非直 ...

  4. js 二叉树遍历

    二叉树定义这里不再赘述. 我这里有个二叉树: var tree = { "id": 0, "name": "root", "lef ...

  5. 剑指offer：2.二维数组的查找（Java版）

    备注:本文参照<剑指offer第二版> 题目: 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数, 输入这样的一个二维数组和一个整数 ...

  6. 【mysql】2003-Can't connect to MySQL server (10060)

    使用navicat或者其他数据库管理工具连接mysql时出现2003-Can’t connect to MySQL server (10060)错误 可能造成出现的原因: 1.网络不通畅 2.mysq ...

  7. 微信小程序 table 简单测试

    <view class='AutoTable'> <view id='AutoTableItem'> <block wx:for="{{array}}" ...

  8. HTML5 常用标签整理

    <!--1.  html5 文本 --> <div> <header> <hgroup> <h1>h1</h1> <h2& ...

  9. [HTML/CSS]下拉菜单

    原理:先让下拉菜单隐藏,鼠标移到的时候在显示出来 1>display 无动画效果,图片是秒出 2>opacity 有动画效果,我这里是1S出现,推荐配合绝对定位使用

  10. HTML笔记（适合新手入门）

    HTML Web 标准构成 Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合. 主要包括结构(Structure).表现(Presentation)和行为(Behavior ...