参考自 ： https://blog.csdn.net/qq_38881495/article/details/83689721

  •                 .chapter_data
    
                  position relative
    
                  width 100%
    
                  max-height 390px
    
                  overflow hidden
    
                  overflow-y auto
    
                  box-sizing border-box
    
                  padding-left 24px
    
                  /* diy 滚动条核心代码 */
    
                  &::-webkit-scrollbar    /*滚动条整体样式*/
    
                    width 4px    /*高宽分别对应横竖滚动条的尺寸*/
    
                    height 4px
    
                  &::-webkit-scrollbar-thumb    /*滚动条里面小方块*/
    
                    border-radius 5px
    
                    -webkit-box-shadow inset 0 0 5px rgba(0,0,0,0.2)
    
                    background rgba(255, 255, 255, 0.2)
    
                  &::-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)

diy 滚动条 样式 ---- 核心代码的更多相关文章

  1. 自设chrome默认滚动条样式

    今天无聊,想着chrome这种全面使用html的浏览器,可不可以让我自行改变它的默认CSS呢,结果去查查,有,很好 win7/8目录为 C:\Users\[你的用户名]\AppData\Local\G ...

  2. 设置cnblogs默认滚动条样式

    默认滚动条样式丑嘛就不谈了~这里修改为个性化滚动条样式. CSS代码 /*滚动条整体样式*/ body::-webkit-scrollbar { width: 10px; height: 1px; } ...

  3. HTML ---滚动条样式代码及<marquee>标签的用法;

    html中滚动条属性设置 scrollbar属性.样式详解 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)    overflow-x水平方向内容溢出时的设置    overfl ...

  4. css实现修改默认滚动条样式

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head&g ...

  5. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  6. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  7. CSS 控制滚动条样式

    /*作为IT界最前端的技术达人,页面上的每一个元素的样式我们都必须较真,就是滚动条我们也不会忽略.下面我给大家分享一下如何通过CSS来控制滚动条的样式,代码如下:*/ 1 /*定义滚动条轨道*/ #s ...

  8. 在css中定义滚动条样式

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

  9. duilib让不同的容器使用不同的滚动条样式

    装载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42240569 以前在给一个容器设置横纵向的滚动条时,一直是通过设置xml ...

随机推荐

  1. Python multiprocessing

     推荐教程 官方文档 multiprocess各个模块较详细介绍 廖雪峰教程--推荐 Pool中apply, apply_async的区别联系 (推荐)python多进程的理解 multiproce ...

  2. QT学习之如何在QToolBar中添加带图标的QToolButton并设置图标大小

    在网上查到了三种方法,找到一种比较好理解的. 使用QIcon类: QToolButton *toolBtn1 = new QToolButton(this); //创建QToolButton tool ...

  3. java各种数据类型的数组元素的默认值

    public class DataTypeDefaultValue { public static void main(String[] args) { // string类型数组的默认值null / ...

  4. R语言︱LDA主题模型——最优主题...

    R语言︱LDA主题模型——最优主题...:https://blog.csdn.net/sinat_26917383/article/details/51547298#comments

  5. 初识C语言（三）

    C语言中的运算符 C语言中的运算就是对数据进行操作.处理的过程.运算符就是指定该运算的处理方式. C语言中的运算符: 算术运算符 赋值运算符 关系运算符 逻辑运算符 三目运算符 算数运算符 C语言中的 ...

  6. springboot 错误求解决

    最近再学习springboot这个好东西,结果给当成白老鼠了,我使用的是idea 2018  来测试  一个简单的界面跳转  ,结果报错了,在网上搜了好半天没搜到相应的解决方案,很头疼,希望哪位大神能 ...

  7. Debian+Django+uWsgi+nginx+mysql+celery

    下载系统各种依赖 nano /etc/apt/sources.list 在Debian中使用apt-get安装软件包时经常会提示让你插入netinst的光盘: Media change: please ...

  8. 记一次Hbase的行键过滤器事故问题

    数据总数:746条数据 因为后面需要进行算法合成,而且spark目前对这种算法支持并不好,因此采用代码编写,所以在查询hbase的过程中采用的是java直接查询, 但是为了加快查询速度,我尽可能的使用 ...

  9. 在同一个Apache服务器软件上部署多个站点的基础方法

    这篇文章主要介绍了Apache中Virtual Host虚拟主机配置及rewrite模块中的重要参数说明,是在同一个Apache服务器软件上部署多个站点的基础方法,需要的朋友可以参考下(http:// ...

  10. Linux操作系统log日志日志分别指什么

    Linux操作系统log日志日志分别指什么 2019-04-20    20:41:05 一.一般的日志 /var/log/messages —包括整体系统信息,其中也包含系统启动期间的日志.此外,m ...