diy 滚动条 样式 ---- 核心代码
参考自 : 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 滚动条 样式 ---- 核心代码的更多相关文章
- 自设chrome默认滚动条样式
今天无聊,想着chrome这种全面使用html的浏览器,可不可以让我自行改变它的默认CSS呢,结果去查查,有,很好 win7/8目录为 C:\Users\[你的用户名]\AppData\Local\G ...
- 设置cnblogs默认滚动条样式
默认滚动条样式丑嘛就不谈了~这里修改为个性化滚动条样式. CSS代码 /*滚动条整体样式*/ body::-webkit-scrollbar { width: 10px; height: 1px; } ...
- HTML ---滚动条样式代码及<marquee>标签的用法;
html中滚动条属性设置 scrollbar属性.样式详解 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overfl ...
- css实现修改默认滚动条样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head&g ...
- CSS3自定义滚动条样式 -webkit-scrollbar(转)
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- CSS 控制滚动条样式
/*作为IT界最前端的技术达人,页面上的每一个元素的样式我们都必须较真,就是滚动条我们也不会忽略.下面我给大家分享一下如何通过CSS来控制滚动条的样式,代码如下:*/ 1 /*定义滚动条轨道*/ #s ...
- 在css中定义滚动条样式
1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...
- duilib让不同的容器使用不同的滚动条样式
装载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42240569 以前在给一个容器设置横纵向的滚动条时,一直是通过设置xml ...
随机推荐
- selenium采用xpath方法识别页面元素
有些HTML页面中的元素中属性较少,经常有找不到id.class.name等常用属性的时候,这个时候xpath.css就能很好的识别到我们的元素. Firefox和chrome浏览器中均有xpath. ...
- C++入门篇十
静态成员变量:可以共享数据,类内声明,类外初始化(实现) // 静态成员变量.cpp : 此文件包含 "main" 函数.程序执行将在此处开始并结束. // #include &q ...
- 洛谷P5284 [十二省联考2019]字符串问题 [后缀树]
传送门 思路 设\(dp_i\)表示以\(i\)结尾的\(A\)串,能达到的最长长度. 然后发现这显然可以\(i\)往自己控制的\(k\)连边,\(k\)往能匹配的\(j\)连边,就是个最长路,只要建 ...
- spring注解开发AnnotationConfigApplicationContext的使用
说明 使用AnnotationConfigApplicationContext可以实现基于Java的配置类加载Spring的应用上下文.避免使用application.xml进行配置.相比XML配置, ...
- python vs C++ 类
1. 什么是动态语言(wikipedia) 在运行时,可以进行一些操作(静态语言在编译时执行),比如扩展对象的定义.修改类型等 2. 定义类和创建对象 C++ python class A{ publ ...
- 七 Git版本控制
把环境准备 主机名 node1 ip地址10.0.0.11 node2 10.0.0.12 node3 ...
- C#截取用户的点击事件的代码
在代码过程中中,把做工程过程中常用的代码备份一下,如下代码内容是关于C#截取用户的点击事件的代码,应该是对大家也有好处. private void SomeControl_KeyDown(object ...
- 2018-2019-2 20165323《网络攻防技术》Exp5 MSF基础应用
一.知识点总结 1.MSF攻击方法 主动攻击:扫描主机漏洞,进行攻击 攻击浏览器 攻击其他客户端 2.MSF的六种模块 渗透攻击模块Exploit Modules:攻击漏洞,把shellcode&qu ...
- VB 字符串转换为UTF-8
dim e as object Set e=CreateObject("MSScriptControl.ScriptControl") e.Language = "jav ...
- gitlab搭建,结合pycharm和vs2015配置用于开发python和c++
利用Ubuntu16.04服务器搭建gitlab仓库,本地windows系统使用pycharm和VS开发,通过软件配置可进行代码管理. 1.gitlab安装 ①安装依赖包: sudo apt-get ...