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 ...
随机推荐
- python算法&二分查找法
import random def random_list(n): result = [] ids = list(range(1001,1001+n)) a1 = ["赵",&qu ...
- LeetCode第十九题-链表节点的删除
Remove Nth Node From End of List 问题简介;给定链表,从链表末尾删除第n个节点并返回其头部 例: 给定链表:1-> 2-> 3-> 4-> 5, ...
- L2-006 树的遍历 (25 分)
链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805069361299456 题目: 给定一棵二叉树的后序遍历和中序 ...
- java程序员技术范围
1 工具 开发工具.源代码管理.构建工具.测试工具(压力.安全等).接口测试工具.反编译工具.日志工具.第三方工具等 2 java jvm.多线程.socket.io(两种方式).集合(两大接口).异 ...
- 21 re正则模块 垃圾回收机制
垃圾回收机制 不能被程序访问到的数据,就称之为垃圾 引用计数 引用计数:用来记录值的内存地址被记录的次数的:当一个值的引用计数为0时,该值就会被系统的垃圾回收机制回收 每一次对值地址的引用都可以使该值 ...
- 关于在eclipse中添加windowbuilder插件的问题
最近在学习GUI,发现我的Eclipse中没有windowbuilder插件,之后按照百度搜索,按照网上教程,去安装时,发现下载网页已经更新,造成了很多问题, 不过问题不大,我已经找到了解决方法: 安 ...
- C# 关于X86/X64/AnyCpu 的关系
电脑硬件CPU可以分为x86与x64, x86的机器只能安装32位的操作系统,如XP, WIN7_86, x64的机器既可以安装32位的系统,又可以安装64位的系统,只是在x64的机器上安装32位的系 ...
- 初探 Liunx 的命令模式(一)
1.从 X window 切换到 纯命令模式 Ctrl+Alt+[F2-F6].切换回来 Ctrl+Alt+[F2-F6]. 2. 1)CentOS Linux 7 (Core)代表 Linux d ...
- 爬虫-request和BeautifulSoup模块
requests简介 Python标准库中提供了:urllib.urllib2.httplib等模块以供Http请求,但是,它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工 ...
- ubuntu16.04安装opencv3.4.0
老实说这篇记录可能拖了有8个月了,早在去年6月份我应该是第一遍安装opencv.当时懒得记录,以为自己什么都能记得住.后来由于电脑各种原因,需要重装opencv,装的时候发现啥都记不住了.然后又得去找 ...