更改默认滚动条的样式

2023-11-13

在前端开发的过程中,通常会需要更改滚动条的默认样式
在这里插入图片描述
代码如下:

::-webkit-scrollbar {
  /*滚动条整体样式*/
  /*width: 4px; 高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px #a8a8a8;
  background: #a8a8a8;
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #ededed;
  border-radius: 10px;
  background: #ededed;
}

效果如下:
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

更改默认滚动条的样式 的相关文章

随机推荐

  • cmd相关命令

    查看本地端口占用问题并进行处理 1 查看所有的端口及相关信息 命令 netstat ano 2 找到对应的端口对应的PID 输入指令找到对应的进程 tasklist findstr 7676 7676表示pid 3 杀掉该进程 再次启动就O
  • 爬虫实例十二 沪深证券股票全站数据爬取

    先上代码 import requests from lxml import etree import openpyxl import time import random 新建workbook对象 wb openpyxl Workbook
  • SQLLite创建数据表

    SQLIteTest cpp 此文件包含 main 函数 程序执行将在此处开始并结束 pragma warning disable 4996 include
  • docker + ngrok + nginx内网穿透访问本地,方便本地调试

    ngrok客户端生成 docker run rm it e DOMAIN jiadays com v root ngrok myfiles hteen ngrok bin sh build sh 对应生成的目录 bin ngrokd 服务端
  • hadoop 的 namenode 宕机如何解决

    先分析宕机后的损失 宕机后直接导致client无法访问 内存中的元数据丢失 但是硬盘中的元数据应该还存在 如果只是节点挂了 重启即可 如果是机器挂了 重启机器后看节点是否能重启 不能重启就要找到原因修复了 但是最终的解决方案应该是在设计集群
  • wedo2.0编程模块介绍_wedo2.0课程包

    实例简介 开放性实验的视觉概述 16课时实验课程 包含生命科学 宇宙科学 物质科学 技术与工程 b11 We20简介 欢迎使用乐高教育WeD20 课程包 本章主要介绍产品操作的基本步骤 15V 们Wa02简介 乐高教育W2课程包 乐高教育W
  • 【Python】学生管理系统——详细解释+代码+详细注释(课设必过)

    带你编写学生管理系统 Python 很多学生在学校学习完Python 就要做一个课设考验你对知识的掌握程度 这次就教大家如何来用Python来实现一个学生管理系统 对学生管理系统的分析 学生管理系统是对学生信息的学生信息的增删查改 另外如需
  • DOS下执行robotframework脚本

    在当前python环境中的路径添加pybot bat文件 文件中添加 Echo off python m robot run 启动时添加路径即可 pybot 项目路径
  • python自动化办公--QQ发送邮件包含中文名附件

    python自动化办公 本节目标 python调用QQ邮箱API发送邮件 本节内容 自动化定时发送邮件 本节技术点 smtplib datetime 本节阅读需要 15 min 本节实操需要 20 min 文章目录 python自动化办公
  • 田忌赛马

    田忌赛马 问题描述 中国古代的历史故事 田忌赛马 是为大家所熟知的 话说齐王和田忌又要赛马了 他们各派出N匹马 每场比赛 输的一方将要给赢的一方200两黄金 如果是平局的话 双方都不必拿出钱 现在每匹马的速度值是固定而且已知的 而齐王出马也
  • 玩转Netty – 从Netty3升级到Netty4

    这篇文章主要和大家分享一下 在我们基础软件升级过程中遇到的经典Netty问题 当然 官方资料 也许是一个更好的补充 另外 大家如果对Netty及其Grizzly架构以及源码有疑问的 欢迎交流 后续会为大家奉献我们基于Grizzly和Nett
  • java基础之String类

    String类里面的内容必须会 必须熟悉 public final class String 字符串是一个特殊的对象 这个类不能有子类 String s new String 与String s1 是等价的 String s1 abc s1
  • 基于CH340的一键下载电路

    一 CH340简介 CH340 是一个 USB 总线的转接芯片 实现 USB 转串口或者 USB 转打印口 CH340是国产芯片 应用场合居多 市场占有率很高 常用的USB转串口芯片还有CP2102 PL2303 FT232等 相比之下CH
  • Vue的页面跳转与刷新

    Vue刷新页面 在开发的过程中 有时候我们需要刷新整个页面 this router go 0 Vue页面跳转 例如 在用户登录成功之后跳转到系统首页 this router push home
  • 基础算法题——虫洞(简单版、vector)

    虫洞 简单 题目链接 解题步骤 求出第 i 个星球作为中心子星系时 f i 的大小 对每个 i 与 n f i 异或后的结果相加 再对998244353取模即可得到答案 问题关键点 求第 i 个星球 f i 的大小 个人解题思路 暴力 利用
  • cpython下载_一、Python简介及下载安装

    一 关于Python Python是目前比较受欢迎的脚本语言之一 具有简洁性 易读性以及可扩展性的特点 Python与Java均可以写网页 也可以写后台功能 区别是Python执行效率低 开发效率高 而Java执行效率高 开发效率低 pyt
  • Linux--vim安装、简介、模式及命令

    目录 1 vim简介 1 命令模式转为插入模式 2 命令模式转为末行模式 3 转换图 4 vim常用命令 复制 删除 1 删除 2 拷贝 3 粘贴 4 撤销 5 恢复撤销 6 替换 7 光标移动 1 行开头 2 行末尾 3 最后一行 4 第
  • SAP 销售订单及发票 利润中心替代 Userexit出口 配置及程序

    在跨公司销售业务中 跨公司销售订单的发票时无法从销售订单中将利润中心带到发票中 所以在跨公司的发票创建过程中需要配置出口来获取对应销售订单行项目的利润中心 事务代码 0KEM 配置步骤 1 创建一个新的替代 2 创建一个步骤 3 维护一个先
  • 华为数通方向HCIP-DataCom H12-831题库(单选题:1-20)

    第1题 关于IPSG下列说法错误的是 A IPSG可以防范IP地址欺骗攻击 B IPSG是一种基于三层接口的源IP地址过滤技术 C IPSG可以开启IP报文检查告警功能 联动网管进行告警 D 可以通过IPSG防止主机私自更改IP地址 答案
  • 更改默认滚动条的样式

    在前端开发的过程中 通常会需要更改滚动条的默认样式 代码如下 webkit scrollbar 滚动条整体样式 width 4px 高宽分别对应横竖滚动条的尺寸 height 1px webkit scrollbar thumb 滚动条里面