参考自 ： 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. Mac环境下Vagrant的安装

    1.安装Vagrant 下载地址:https://www.vagrantup.com/downloads.html 下载好pkg包后,点击安装即可. 2.安装 VirtualBox 下载地址:http ...

  2. jmeter创建时间函数

    固定格式的年月日 ${__time(yyyyMMdd,)} 20151214 //返回年月日 ${__time(HHmmss,)} 092816 //返回时分秒 ${__time(yyyyMMdd-H ...

  3. linux服务器内存、根目录使用率、某进程的监控告警脚本

    脚本内容如下 #!/bin/bash #磁盘超过百分之80发送邮件告警 DISK_USED=`df -T |sed -n "2p" |awk '{print ($4/$3)*100 ...

  4. ThinkPHP 2053错误

    这个报错是调用存储过程的时候产生的,用的是5.1的代码是根据官方文档写的,我怀疑5.0也有这个问题.去官方查了一下发现不少人有这个问题,但是官方都没有回应过,只能自己动手一步步调了. $center ...

  5. jQuery-委托事件和on方法注册事件

    delegate注册委托事件 delegate--代理.委托 事件代理----事件最终不是由$("#first")执行,它只是代理元素 第一个参数:最终发生事件的元素 第二个参数: ...

  6. python3.0j基语法-01

    python基础语法,字符编码,python解释器在加载 .py 文件中的代码时,会对内容进行编码(默认ascill) print("Hello word") 一个简单hello ...

  7. buaaoo_second_improvement

    你不优化,我不优化,那大家就都是满分啦 (一)写在最前 电梯问题由于和实际关联比较紧密,所以实际上可以操作的空间比较多. 但第二单元的电梯,需要实现捎带:第三单元的电梯,需要实现楼层限制.人数限制.三 ...

  8. elasticsearch 学习

    docker run -p : -d elasticsearch #直接拉取运行 #指定条件搜索curl --request GET \ --url 'http://localhost:9200/im ...

  9. nginx 常用命令

    -?,-h         : this help  -v            : show version and exit  -V            : show version and c ...

  10. The type 'Expression<>' is defined in an assembly that is not referenced.You must add a reference to assembly 'System.Core, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089'.

    在我将一个.net framework 4.0+mvc4+ef5的项目,升级到.net framework 4.6.1+mvc5+ef6之后,解决了所有的升级带来的问题,唯独在razor的cshtml ...