CSS通过webkit-scrollbar设置滚动条样式

查看::-webkit-scrollbar-*各项关系

以下图为例,可以分别定义滚动条背景、滚动轨道、滚动滑块的样式。
在这里插入图片描述

需要先给外部容器设置高度,再设置overflow: auto,最后设置三个webkit属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container{margin: 50px;width: 200px;height: 300px;border: 1px solid #000;background-color: #ddd;overflow: auto;/* 显示滚动条*/ }/* 定义滚动条 */::-webkit-scrollbar{width: 50px;background: rgb(43, 239, 25);}/* 定义滚动轨道 */::-webkit-scrollbar-track{background: rgb(250, 81, 81);border-radius: 10px;}/* 定义滚动滑块 */::-webkit-scrollbar-thumb{background: orange;border-radius: 20px;}</style>
</head>
<body><div class="container"><p>南京师范大学地理科学学院溯源于1902年三江师范学堂历史舆地科,1919年后历经南京高等师范学校国文史地部、国立东南大学地学系、国立中央大学地理系、南京大学地理系等阶段。1952年全国院系调整之际,时任南京大学地理系主任的李旭旦教授偕金祖孟、陆漱芬等先生至南京师范学院创办地理系。1997年江苏省教育委员会批准组建了当时国内第一家地理科学学院。2017年入选国家“双一流”建设学科,2018年地球科学学科进入ESI前1%。2022年再次入选国家“双一流”建设学科。学院始终高举地理学大旗,以国家一流学科和国家重点学科建设为主导、以高水平队伍建设和创新创业人才培养为根本,以科研条件与平台建设为基础,以产学研相结合为动力,脚踏实地建设一流的学科、一流的平台和一流的学院。</p><p>学院拥有地理学国家一流建设学科,地图学与地理信息系统国家级重点学科和人文地理学国家重点(培育)学科,地理信息系统江苏省重中之重学科,自然地理学和人文地理学江苏省重点学科,地理学江苏省一级重点学科和江苏省高校优势学科。拥有虚拟地理环境教育部重点实验室、警用地理信息技术公安部重点实验室、国家地球系统科学数据中心长江三角洲分中心、江苏省地理环境演化国家重点实验室培育建设点、江苏省地理信息资源开发与利用协同创新中心、环境演变与生态建设江苏省重点实验室、地理信息科学江苏省重点实验室、物质循环与污染控制江苏省重点实验室、地理空间信息技术江苏省工程中心、江苏省区域发展与规划研究中心等省部级科研机构,为开展科学研究提供了高水平的优质平台。</p></div>
</body>
</html>

设置简单的、窄的滚动条

        /* 定义滚动条 */::-webkit-scrollbar{width: 10px;border-radius: 10px;background: rgb(198, 198, 198);}/* 定义滚动轨道 */::-webkit-scrollbar-track{background: rgb(198, 198, 198);border-radius: 10px;}/* 定义滚动滑块 */::-webkit-scrollbar-thumb{background: rgb(103, 103, 103);border-radius: 10px;}

在这里插入图片描述

只对某个滚动条设置样式

在这里插入图片描述

::-webkit-scrollbar等三个伪元素前面添加自定义类的限制:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container{margin: 50px;padding: 10px;width: 200px;height: 300px;border: 1px solid #000;background-color: #ddd;overflow: auto;/* 显示滚动条*/ float: left;}/* 定义滚动条 */.scroll::-webkit-scrollbar{width: 10px;border-radius: 10px;background: rgb(198, 198, 198);}/* 定义滚动轨道 */.scroll::-webkit-scrollbar-track{background: rgb(198, 198, 198);border-radius: 10px;}/* 定义滚动滑块 */.scroll::-webkit-scrollbar-thumb{background: rgb(103, 103, 103);border-radius: 10px;}</style>
</head>
<body><div class="container scroll"><p>南京师范大学地理科学学院溯源于1902年三江师范学堂历史舆地科,1919年后历经南京高等师范学校国文史地部、国立东南大学地学系、国立中央大学地理系、南京大学地理系等阶段。1952年全国院系调整之际,时任南京大学地理系主任的李旭旦教授偕金祖孟、陆漱芬等先生至南京师范学院创办地理系。1997年江苏省教育委员会批准组建了当时国内第一家地理科学学院。2017年入选国家“双一流”建设学科,2018年地球科学学科进入ESI前1%。2022年再次入选国家“双一流”建设学科。学院始终高举地理学大旗,以国家一流学科和国家重点学科建设为主导、以高水平队伍建设和创新创业人才培养为根本,以科研条件与平台建设为基础,以产学研相结合为动力,脚踏实地建设一流的学科、一流的平台和一流的学院。</p><p>学院拥有地理学国家一流建设学科,地图学与地理信息系统国家级重点学科和人文地理学国家重点(培育)学科,地理信息系统江苏省重中之重学科,自然地理学和人文地理学江苏省重点学科,地理学江苏省一级重点学科和江苏省高校优势学科。拥有虚拟地理环境教育部重点实验室、警用地理信息技术公安部重点实验室、国家地球系统科学数据中心长江三角洲分中心、江苏省地理环境演化国家重点实验室培育建设点、江苏省地理信息资源开发与利用协同创新中心、环境演变与生态建设江苏省重点实验室、地理信息科学江苏省重点实验室、物质循环与污染控制江苏省重点实验室、地理空间信息技术江苏省工程中心、江苏省区域发展与规划研究中心等省部级科研机构,为开展科学研究提供了高水平的优质平台。</p></div><div class="container"><p>南京师范大学地理科学学院溯源于1902年三江师范学堂历史舆地科,1919年后历经南京高等师范学校国文史地部、国立东南大学地学系、国立中央大学地理系、南京大学地理系等阶段。1952年全国院系调整之际,时任南京大学地理系主任的李旭旦教授偕金祖孟、陆漱芬等先生至南京师范学院创办地理系。1997年江苏省教育委员会批准组建了当时国内第一家地理科学学院。2017年入选国家“双一流”建设学科,2018年地球科学学科进入ESI前1%。2022年再次入选国家“双一流”建设学科。学院始终高举地理学大旗,以国家一流学科和国家重点学科建设为主导、以高水平队伍建设和创新创业人才培养为根本,以科研条件与平台建设为基础,以产学研相结合为动力,脚踏实地建设一流的学科、一流的平台和一流的学院。</p><p>学院拥有地理学国家一流建设学科,地图学与地理信息系统国家级重点学科和人文地理学国家重点(培育)学科,地理信息系统江苏省重中之重学科,自然地理学和人文地理学江苏省重点学科,地理学江苏省一级重点学科和江苏省高校优势学科。拥有虚拟地理环境教育部重点实验室、警用地理信息技术公安部重点实验室、国家地球系统科学数据中心长江三角洲分中心、江苏省地理环境演化国家重点实验室培育建设点、江苏省地理信息资源开发与利用协同创新中心、环境演变与生态建设江苏省重点实验室、地理信息科学江苏省重点实验室、物质循环与污染控制江苏省重点实验室、地理空间信息技术江苏省工程中心、江苏省区域发展与规划研究中心等省部级科研机构,为开展科学研究提供了高水平的优质平台。</p></div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/71745.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自制操作系统前置知识汇编学习

今天要做什么&#xff1f; 为了更好的理解书中内容&#xff0c;需要学习下进制分析和汇编。 汇编语言其实应该叫叫机器指令符号化语言&#xff0c;目前的汇编语言是学习操作系统的基础。 一&#xff1a;触发器 电路触发器的锁存命令默认是断开的&#xff0c;是控制电路触发器…

uCOSIII-移植

一、uCOS移植 1.移植 C/OS-III前&#xff0c;需要获取C/OS-III 的源代码&#xff0c;C/CPU 和 C/LIB 这两个组件的源代码。 2.将获取的uCOSIII源代码添加到工程文件中&#xff1a; ①.uC-CPU/ARM-Cortex-M/ARMv7-M/ARM/cpu_a.asm、uC-CPU\ARM-Cortex-M\ARMv7-M\cpu_c.c 和 uC-…

Windows使用docker部署fastgpt出现的一些问题

文章目录 Windows使用docker部署FastGPT出现的一些问题1.docker部署pg一直重启的问题2.重启MongoDB之后一直出现“Waiting for MongoDB to start...”3.oneapi启动不了failed to get gpt-3.5-turbo token encoder Windows使用docker部署FastGPT出现的一些问题 1.docker部署pg一…

【Python爬虫(52)】探秘Scrapy:项目结构与配置全解析

【Python爬虫】专栏简介&#xff1a;本专栏是 Python 爬虫领域的集大成之作&#xff0c;共 100 章节。从 Python 基础语法、爬虫入门知识讲起&#xff0c;深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑&#xff0c;覆盖网页、图片、音频等各类数据爬取&#xff…

【Android】ViewPager的使用

AndroidManifest.xml <?xml version"1.0" encoding"utf-8"?> <manifest xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"><applicationandroid:allowBac…

京东广告基于 Apache Doris 的冷热数据分层实践

一、背景介绍 京东广告围绕Apache Doris建设广告数据存储服务&#xff0c;为广告主提供实时广告效果报表和多维数据分析服务。历经多年发展&#xff0c;积累了海量的广告数据&#xff0c;目前系统总数据容量接近1PB&#xff0c;数据行数达到18万亿行&#xff0c;日查询请求量8…

Windows PyCharm的python项目移动存储位置后需要做的变更

项目使用的venv虚拟环境&#xff0c;因此项目移动存储位置后需要重新配置python解释器的位置&#xff0c;否则无法识别&#xff0c;若非虚拟环境中运行&#xff0c;则直接移动后打开即可&#xff0c;无需任何配置。 PyCharm版本为2021.3.3 (Professional Edition)&#xff0c;其…

前后端对接

前端与后端的对接主要通过 接口 进行数据交互&#xff0c;具体流程和方式如下&#xff1a; 1. 明确需求与接口定义 前后端协商&#xff1a;确定需要哪些接口、接口的功能、请求参数和返回格式。接口文档&#xff1a;使用工具&#xff08;如 Swagger、Postman、Apifox&#xff…

简识MQ之Kafka、ActiveMQ、RabbitMQ、RocketMQ传递机制

四种主流消息队列&#xff08;Kafka、ActiveMQ、RabbitMQ、RocketMQ&#xff09;的生产者与消费者传递信息的机制说明&#xff0c;以及实际使用中的注意事项和示例&#xff1a; 1. Apache Kafka 传递机制 模型&#xff1a;基于 发布-订阅模型&#xff0c;生产者向 主题&#…

Websocket——心跳检测

1. 前言&#xff1a;为什么需要心跳机制&#xff1f; 在现代的实时网络应用中&#xff0c;保持客户端和服务端的连接稳定性是非常重要的。尤其是在长时间的网络连接中&#xff0c;存在一些异常情况&#xff0c;导致服务端无法及时感知到客户端的断开&#xff0c;可能造成不必要…

tailwindcss 前端 css 框架 无需写css 快速构建页面

版本&#xff1a;VUE3 TS 框架 vite 文章中使用tailwindcss 版本&#xff1a; ^3.4.17 简介&#xff1a; Tailwind CSS 一个CSS 框架&#xff0c;提供组件化的样式&#xff0c;直接在HTML 中编写样式&#xff0c;无需额外自定义CSS &#xff0c;快速&#xff01; 简洁&#…

MFC开发:如何创建第一个MFC应用程序

文章目录 一、概述二、MFC 的主要组件三、创建一个MFC窗口四、控件绑定消息函数 一、概述 MFC 是微软提供的一个 C 类库&#xff0c;用于简化 Windows 应用程序的开发。它封装了 Windows API&#xff0c;提供面向对象的接口&#xff0c;帮助开发者更高效地创建图形用户界面&am…

【Git版本控制器】第四弹——分支管理,合并冲突,--no-ff,git stash

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;Linux网络编程 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 ​ 相关笔记&#xff1a; https://blog.csdn.net/djd…

AI助力小微企业技术开发规范化管理 | 杂谈

AI助力小微企业技术开发规范化管理 在小型技术研发企业中&#xff0c;人员配置紧张&#xff0c;往往一名员工需要承担多项职务和任务。例如&#xff0c;后端程序开发人员可能同时要负责需求调研、数据库设计、后端设计及开发&#xff0c;甚至在某些情况下还需兼任架构师的角色。…

SpringBoot+Vue+微信小程序的猫咖小程序平台(程序+论文+讲解+安装+调试+售后)

感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff0c;项目以及论文编写等相关问题都可以给我留言咨询&#xff0c;我会一一回复&#xff0c;希望帮助更多的人。 系统介绍 在当下这个高速发展的时代&#xff0c;网络科技正以令人惊叹的速度不断迭代更新。从 5G …

DeepSeek提效实操革命,全场景应用指南 AI提示词万能公式四步法以及对话技巧

欢迎来到涛涛聊AI DeepSeek系列文章 三块显示器如何摆放效率最高&#xff0c;让deepseek给深度思考下 阿里云免费试用 DeepSeek大模型。 限时送 100 万 tokens&#xff0c;快来抢先免费体验&#xff01;AI 助手不再出现系统繁忙阿里云免费试用 DeepSeek大模型。 限时送 100 万 …

智慧教室与无纸化同屏技术方案探讨与实现探究

引言 随着教育信息化的不断发展&#xff0c;智慧教室和无纸化同屏技术逐渐成为提升教学效率和质量的重要手段。大牛直播SDK凭借其强大的音视频处理能力和丰富的功能特性&#xff0c;在智慧教室和无纸化同屏领域积累了众多成功案例。本文将深入探讨基于大牛直播SDK的智慧教室、…

Linux MySQL 8.0.29 忽略表名大小写配置

Linux MySQL 8.0.29 忽略表名大小写配置 问题背景解决方案遇到的问题&#xff1a; 问题背景 突然发现有个大写的表报不存在。 在Windows上&#xff0c;MySQL是默认支持忽略大小写的。 这个时候你要查询一下是不是没有配置&#xff1a; SHOW VARIABLES LIKE lower_case_table…

【蓝桥杯单片机】第十三届省赛第二场

一、真题 二、模块构建 1.编写初始化函数(init.c) void Cls_Peripheral(void); 关闭led led对应的锁存器由Y4C控制关闭蜂鸣器和继电器 2.编写LED函数&#xff08;led.c&#xff09; void Led_Disp(unsigned char ucLed); 将ucLed取反的值赋给P0 开启锁存器 关闭锁存…

【CMake 教程】常用函数与构建案例解析(三)

一、CMake 常用函数简析 1. 条件判断 if() / elseif() / else() 在 CMake 脚本中&#xff0c;条件判断是控制逻辑的重要工具。if() 支持多种比较语句&#xff0c;包括数值、字符串、布尔值和变量存在性等。在条件满足时执行特定逻辑代码&#xff0c;下面是典型语法&#xff1…