参考自 ： 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. 【译】索引进阶（七）：SQL SERVER中的过滤索引

    原文链接:传送门. To be continued...

  2. Non-decreasing Array

    Given an array with n integers, your task is to check if it could become non-decreasing by modifying ...

  3. React（17）异步组件

    26.异步组件当在React里使用异步组件时,核心知识是两个: webpack 如何异步加载其他模块:通过 require(['xxx'], function(module){})来实现:React ...

  4. .Net Core----关于MVC中TempData持久化问题

    最近在做mvc跨控制器传值的时候发现一个问题,就是有时候TempData的值为null,然后查阅了许多资料,发现了许多都是逻辑和原理什么的(想看原理可以查看原理的文章,本文是用法),但是真正解决的办法 ...

  5. Zypper常用命令

    Zypper是OpenSUSE和企业版SUSE中软件包管理器ZYpp的命令行接口. 主要用于:1.管理软件包:zypper可用来安装.删除.更新和查询本地或远程的软件包.2.管理仓库:zypper可用 ...

  6. ABP学习之路--切换mysql数据库

    1.添加mysql相关引用 注意,使用最新版本会导数据迁移时出错 2.修改链接字符串: <add name="Default" connectionString=" ...

  7. MUI上传图片之选择相册和相机上传

    1.因为项目中有三处地方需要上传,所以html中存在三处地方.身份证正反面为上传一张,发票限制上传9张. <div class="action1"> <!--展示 ...

  8. elment-ui中 修改el-table表头的颜色

    可以直接在table上添加: :header-cell-style="{background:'#f5f7fa'}" 也可以使用绑定方法来修改 :header-cell-style ...

  9. .net core 接口返回图片并且进行压缩

    背景:  .net core 中默认已经取消可以直接访问图片,因为这样不安全. 导致我们上传的图片无法直接通过url访问. 解决方案:  一: 通过修改项目配置,使可以直接通过url访问.(方法略,可 ...

  10. 【玩转开源】BananaPi R2 —— 第一篇 Openwrt安装

    最近手上拿到一块香蕉派的R2,这块板子可以用作路由器,所以决定在板子上面跑一下Openwrt. R2的外观长这个样子,看起来还是比较酷的: 硬件介绍 CPU 是MTK的4核芯片mt7623n,搭配mt ...