参考自 ： 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. LeetCode第十九题-链表节点的删除

    Remove Nth Node From End of List 问题简介;给定链表,从链表末尾删除第n个节点并返回其头部 例: 给定链表:1-> 2-> 3-> 4-> 5, ...

  2. java学习笔记07-循环

    java有三种主要的循环结构 while循环 do...while循环 for循环 while循环 while(布尔表达式){ //循环内容 } public static void main(Str ...

  3. expect 批量自动部署ssh 免密登陆 之 二

    #!/usr/bin/expect -f ########################################## hutu #Push the id.pas.pub public key ...

  4. ptmalloc内存分配释放

    出处 分配: 1)获取分配区的锁,为了防止多个线程同时访问同一个分配区,在进行分配之前需要取得分配区域的锁.线程先查看线程私有实例中是否已经存在一个分配区,如果存在尝试对该分配区加锁,如果加锁成功,使 ...

  5. c编译步骤

    这几天查编译问题时,在头文件中加入某些错误信息,却发现没有编译报错.想了一下可能是,还未进行到语法分析阶段. 这里再了解一下编译过程. 一般而言代码编译包含了四个阶段的处理,即预处理(也称预编译,Pr ...

  6. zabbix 修改为UTC 时区的配置

    修改php.ini中的date.timezone = UTC还确实是正解,修改后要重新启动apache,另外你应该用phpinfo()检查一下你修改php.ini和phpinfo()中指明的当前php ...

  7. UWP Acrylic Material

    文档:https://docs.microsoft.com/en-us/windows/uwp/design/style/acrylic Acrylic 能带来类似 win7 的毛玻璃效果 要使用 A ...

  8. python全栈开发day113-DBUtils（pymysql数据连接池）、Request管理上下文分析

    1.DBUtils(pymysql数据连接池) import pymysql from DBUtils.PooledDB import PooledDB POOL = PooledDB( creato ...

  9. Codeforces 258D Little Elephant and Broken Sorting （看题解） 概率dp

    Little Elephant and Broken Sorting 怎么感觉这个状态好难想到啊.. dp[ i ][ j ]表示第 i 个数字比第 j 个数字大的概率.转移好像比较显然. #incl ...

  10. Linux-day2-上课笔记

    UGO权限 1) 文件对于拥有者的权限   User 2) 文件对于所属组里面的用户的权限 Group 3) 文件对于其他人的权限  Others 对于文件的权限 1)对于文件可读  r 2)对于文件 ...