参考自 ： 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. Pytorch--Dropout笔记

    dropout常常用于抑制过拟合,pytorch也提供了很方便的函数.但是经常不知道dropout的参数p是什么意思.在TensorFlow中p叫做keep_prob,就一直以为pytorch中的p应 ...

  2. 也写dateUtil.js

    yl.dateUtil = { /** * y 年 * M 月 * d 日 * H 时 h 时(am/pm) * m 分 * s 秒 * S 毫秒 * a 上午/下午(am/pm) * setInte ...

  3. Django学习笔记（二）视图函数

    一.url映射 1.为什么回去urls.py文件中找映射? 在‘settings.py’文件中配置了‘ROOT_URLCONF’为‘urls.py’.所有的django回去urls.py中寻找. 2. ...

  4. Python 并发编程

    进程 开启进程 from multiprocessing import Process import time def task(name): print('%s is running' %name) ...

  5. 【转】web.xml中的contextConfigLocation在spring中的作用

    一.spring中如何使用多个xml配置文件 1.在web.xml中定义contextConfigLocation参数,Spring会使用这个参数去加载所有逗号分隔的xml文件,如果没有这个参数,sp ...

  6. 西瓜视频蓝光1080P下载方法

    西瓜视频的蓝光画质只能在APP上看,如何获取1080P画质的地址呢? 1.先安装 WinPcap 2.然后安装夜神安卓模拟器NOX 3.NOX模拟器里安装西瓜视频的最新APP,旧版本APP只提供超清模 ...

  7. 【easy】278. First Bad Version

    有一系列产品,从某个开始其后都不合格,给定一个判断是否合格的函数,找出N个产品中第一个不合格的产品. 正确答案: // Forward declaration of isBadVersion API. ...

  8. QT windeployqt

    qt发布release版本时需要打包一些dll,需要哪些呢?请看截图: 在qt的安装包下找到这些文件,放在release文件夹下即可,当然有些时候也会需要一些其他的,比如含有串口的程序还需要加入Qt5 ...

  9. mac下Android开发环境的配置

    近似一天的时间,终于把Android环境配置好了. 总结:主要问题在于android的网站是国外,下载东西的时候需要vpn才可以.所以会出现各种各样的问题. 环境:Android Studio + S ...

  10. Unity中各种格式计时器

    问题背景: 在开发游戏过程中,很多地方需要倒计时,但是各种地方要的倒计时格式不同,倒计时都会写,在这里不详细介绍,写的目的就是为了记录一下,方便复用(为了在开发过程中不为了小问题浪费不必要脑细胞) 1 ...