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 ...
随机推荐
- 干掉windows无脑设定:“始终使用选择的程序打开这种文件”、“使用Web服务查找正确的程序”
先看几张图体会一下: 实在很佩服自己就那样默默忍受了很多很多年.其实这些东西在网上小小的一搜,5分钟就能搞定. 然而我们大家都在想,现在没时间,我还要做xxxx事呢,反正多点两下鼠标而已. 是啊,点两 ...
- spring boot集成swagger,自定义注解,拦截器,xss过滤,异步调用,guava限流,定时任务案例, 发邮件
本文介绍spring boot集成swagger,自定义注解,拦截器,xss过滤,异步调用,定时任务案例 集成swagger--对于做前后端分离的项目,后端只需要提供接口访问,swagger提供了接口 ...
- java学习笔记11-static关键字
如果在类中使用static关键字创建方法,这种方法称为类方法,可以在这个类中直接引用.而不是用static创建的方法.这种方法称为对象方法(实例方法),需要创建对象后才能使用. package les ...
- WPF入门之一APP.XAML
WPF运行之后,App.xaml是应用的声明起始点. 一.指定入口 通过指定Application 的StartupUri属性,指示了启动应用的时候,加载哪个窗口或网页. 最常见的就是将默认的Main ...
- MQTT报文格式
MQTT报文结构 控制报文由三部分组成: 1.Fixed header 固定报头,所有报文都包含 2.Variable header 可变报头,部分报文包含 3.Body 有效载荷,部分报文包含 固定 ...
- C#基于websocket-sharp实现简易httpserver(封装)
一.背景 其实就是很简单的,公司会桌面开发的人员紧缺啊,项目又赶,而我们公司的前端人员人多还厉害(ps:吐槽下,后端的人真的少啊,会桌面开发的更少啊),所以萌生出了使用html+js来构建本地应用程序 ...
- CentOS7各个版本镜像下载地址
# CentOS7.6 下载地址 # CentOS-7-x86_64-DVD-1810.iso CentOS 7.6 DVD 版 4G http://mirrors.163.com/centos/7. ...
- Fiddler对Android应用进行抓包
一:面对安卓包的时候进行分析问题 首先下载fiddler工具进行安装. 使用:第一步:启动Fiddler,打开菜单栏中的 Tools > Fiddler Options,打开“Fiddler O ...
- RPA 介绍
一 术语表 机器人流程自动化(RPA):在数字系统中模拟和集成人类行为以优化业务流程的软件机器人.RPA自动化捕获数据.运行应用程序.触发响应并与其他系统通信以执行各种任务. RPA路线图(RPA r ...
- Jmeter组成结构及运行原理
Jmeter结构主要组成要素包括:测试计划,线程组,采样器以及监听器.对于各部件的作用域关系如下图: Jmeter是纯Java程序,使用JVM,运行采用多线程完成,往往单台负载机由于机器配置有限,支持 ...