参考自 : 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. 分布式系列十五: MongoDB数据库

    MongoDB 是基于分布式文件存储的数据库. 开发语言是C++. 具有高性能,可扩展的特点. 是NoSql中最像关系数据库的. 什么是NoSql NoSQL 是 Not only SQL 的缩写. ...

  2. Py西游攻关之Socket网络编程

    新闻 管理   Py西游攻关之Socket网络编程   知识预览 计算机网络 回到顶部 网络通信要素: A:IP地址   (1) 用来标识网络上一台独立的主机 (2) IP地址 = 网络地址 + 主机 ...

  3. python制作串口工具

    # coding:utf-8import timeimport serialimport stringimport binasciiimport linecache FilePath="G: ...

  4. Shell中字符串的切割、拼接、比较、替换

    [截取] 一.Linux shell 截取字符变量的前8位,有方法如下: expr substr “$a” 1 8 : 二.按指定的字符串截取 第一种方法: ${varible##*string} # ...

  5. node命令行工具—cf-cli

    音乐分享: 钢心 - <龙王> 初喜<冠军>后喜<龙王> (PS:听一次钢心乐队的演出后采访才知道 “龙王”隐喻的是一起喝酒的老铁....) ——————————— ...

  6. c++入门篇七

    拷贝构造函数的调用时机: class Person { public: //构造函数 Person() { //无参构造函数 } Person(int a) { //有参构造函数 cout <& ...

  7. D - WE POJ - 3273 (二分法)

    Farmer John is an astounding accounting wizard and has realized he might run out of money to run the ...

  8. java 冒泡排序 day003

    一.冒泡排序: 利用冒泡排序对数组进行排序 二.基本概念: 依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后.然后比较第2个数和第3个数, ...

  9. W3CSchool闯关笔记(Bootstrap)

    该闯关内容与JS闯关衔接. 每一题的答案均在注释处, 第一关:把所有的HTML内容放在一个包含有container-fluid的class名称的div下(注意,是所有的HTML内容,style标签属于 ...

  10. JSP项目前端优化

    问题:在谷歌浏览器中兼容问题,在点击超链接第一次会跳到头部,第二次点击才能打开的问题. 解决方案:是href的问题,删除href的属性,使用click事件,并添加a的超链接样式. #othera{ c ...