CSS--超出就显示滚动条并设置滚动条的样式

原文网址:CSS--超出就显示滚动条并设置滚动条的样式_IT利刃出鞘的博客-CSDN博客

简介

本文介绍HTML如何超出就显示滚动条并设置滚动条的样式。

超出就显示滚动条

方法如下:

第一步:设置父容器的高度(height或者max-height)

第二部:设置父容器的overflow: auto; 或overflow: scroll

例如:

.container {max-height: 80vh;overflow: auto;
}

滚动条的样式

在 CSS 中,有以下几种选择器可以用于设置滚动条的样式:

  • ::-webkit-scrollbar:用于设置滚动条样式。
  • ::-webkit-scrollbar-track:用于设置滚动条轨道的样式。
  • ::-webkit-scrollbar-thumb:用于设置滚动条滑块的样式。
  • ::-webkit-scrollbar-button:用于设置滚动条两端的按钮样式。
  • ::-webkit-scrollbar-track-piece:用于设置滚动条轨道中间区域的样式。
  • ::-webkit-scrollbar-corner:用于设置滚动条两个轨道的交叉区域(角落)的样式。
  • ::-webkit-resizer:用于设置滚动条调整大小的控制点的样式。

这些选择器都是针对 WebKit 内核浏览器(Chrome和Safari等)的特定伪元素,并且只能在这些浏览器中生效。Firefox和IE等不支持这些样式,它们有自己的定义方式。

示例(Chrome和Safari等浏览器):

/* 设置滚动条的宽度 */
::-webkit-scrollbar {width: 10px; /* 滚动条宽度 */
}/* 设置滚动条轨道的背景颜色 */
::-webkit-scrollbar-track {background-color: #f1f1f1;
}/* 设置滚动条滑块的背景颜色 */
::-webkit-scrollbar-thumb {background-color: #888;
}/* 设置滚动条滑块悬停时的背景颜色 */
::-webkit-scrollbar-thumb:hover {background-color: #555;
}

Firefox浏览器

/* 注意:Firefox 浏览器需要同时设置 scrollbar-width 和 scrollbar-color 来生效 */
/* 此示例将滚动条设置为红色,滑块设置为绿色 */
* {scrollbar-width: thin;scrollbar-color: green red;
}

其他浏览器

其他浏览器(如IE、Edge等)暂时不支持自定义滚动条样式。

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

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

相关文章

Bigtable的数据结构

Bigtable的数据结构 1. 表(Table) 基本单位:Bigtable存储数据的基本单位是表,一个表由多行组成。无限制:表可以非常大,理论上没有大小限制。 2. 行(Row) 行键:每一行…

GeoServer安装启动

GeoServer 使用 servlet 容器(例如Apache Tomcat)打包为独立的 Java web 应用程序。以下说明专门针对 Tomcat。它可能不适用于其他容器应用程序。 在 Tomcat 上安装 导航到GeoServer 下载页面。从“已存档”中,选择最新的 2.18.x 版本的 GeoS…

Python12 列表推导式

1.什么是列表推导式 Python的列表推导式(list comprehension)是一种简洁的构建列表(list)的方法,它可以从一个现有的列表中根据某种指定的规则快速创建一个新列表。这种方法不仅代码更加简洁,执行效率也很…

iOS 17.6养老版发布,旧机必升?

iOS 17.6 的第一个开发者测试版已发布,另外还发布了macOS 14.6、watchOS 10.6、iPadOS 17.6 等。 苹果iOS系统更新一直是科技爱好者和用户关注的焦点,尤其是在iOS18的测试阶段,其吸引力尤为显著。尽管苹果同时推送了iOS17.6 Beta1&#xff0c…

linux 如何判断磁盘是HDD还是SSD

本文主要是判断磁盘是 HDD 还是不上 HDD,只用于直通盘的判断,raid盘不在内 方法一、 使用lsblk 命令判断 # 仅查看物理盘的名称、空间大小、SSD(0)? HDD(1)?, 设备供应商以及状态。 [integraTorsctyunos ~]$ lsblk -d -o NAME,SIZE,ROTA,VENDOR,STATE…

kimi+的+能为论文写作+出什么?我帮你试过了!

学境思源,一键生成论文初稿: AcademicIdeas - 学境思源AI论文写作 Kimi是月之暗面科技有限公司开发的个性化智能助手功能。相比kimi,Kimi能够提供个性化定制服务,根据用户特定需求提供更专业深入的辅助,实现一对一的智…

多线程(总结黑马程序员)

一、什么是线程? 是一个程序内部的一条执行流程 多线程是什么? 多条线程由CPU负责调度执行 多线程的创建方式一:继承Thread类 //1.继承Thread类 public class MyThread extends Thread {//2.必须重写run方法Overridepublic void run() {…

人工智能之AI作画

AI作画(AI-generated Art)是指利用人工智能技术来创作艺术作品的过程。随着深度学习和生成模型的发展,AI作画已经在艺术界和技术界引起了广泛关注和研究。从专业角度来看,AI作画涉及多个技术领域,包括计算机视觉、机器…

【人机交互 复习】第9章 以用户为中心的设计

一、以用户为中心的设计(UCD) 1.思想: (1)好的设计结果使客户感到满意。 (2)设计过程是设计人员与客户之间的协作过程。设计要进化并适应客户不断变化的考虑,作为一种副产品&#…

Clickhouse备份恢复_clickhouse-client方式backup命令之备份目录的设置

https://clickhouse.com/docs/en/operations/backup#command-summary 想要backup database dbname to Disk(‘diskname’,‘backupfilename.zip’)成功的话&#xff0c;需要符合3点 1、diskname需要在/etc/clickhouse-server/config.d/backup_disk.xml在<storage_configura…

【数据结构】【版本1.3】【线性时代】——栈

快乐的流畅&#xff1a;个人主页 个人专栏&#xff1a;《算法神殿》《数据结构世界》《进击的C》 远方有一堆篝火&#xff0c;在为久候之人燃烧&#xff01; 文章目录 引言一、栈的概念二、栈的模拟实现2.1 定义2.2 初始化2.3 销毁2.4 压栈2.5 判空2.6 出栈2.7 获取栈顶元素2.8…

RAG优化技巧|7大挑战与解決方式|提高你的LLM能力

在当今快速发展的人工智能领域&#xff0c;大型语言模型&#xff08;LLM&#xff09;已经成为无处不在的技术&#xff0c;它们不仅改变了我们与机器交流的方式&#xff0c;还在各行各业中发挥着革命性的影响。 然而&#xff0c;尽管LLM RAG的能力已经让人惊叹&#xff0c;但我…

浅谈配置元件之JDBC连接配置

浅谈配置元件之JDBC连接配置 通过使用“JDBC连接配置”配置元件&#xff08;JDBC Connection Configuration&#xff09;&#xff0c;您可以轻松地在JMeter测试计划中集成数据库交互能力。本指南将详细介绍如何设置和使用此配置元件来连接数据库并执行SQL查询。 1. 准备工作 …

深度学习500问——Chapter12:网络搭建及训练(1)

文章目录 12.1 TensorFlow 12.1.1 TensorFlow 是什么 12.1.2 TensorFlow的设计理念是什么 12.1.3 TensorFlow特点有哪些 12.1.4 TensorFlow的系统架构是怎样的 12.1.5 TensorFlow编程模型是怎样的 12.1.6 如何基于TensorFlow搭建VGG16 12.1 TensorFlow 12.1.1 TensorFlow 是什…

微服务架构:解构现代应用程序的未来

目录 前言1. 微服务架构的基本概念1.1 什么是微服务架构1.2 微服务与单体架构的对比 2. 微服务架构的优势2.1 灵活性与可扩展性2.2 持续交付与部署2.3 技术多样性2.4 故障隔离 3. 微服务架构的挑战3.1 服务间通信和数据一致性3.2 运维复杂度3.3 安全性3.4 开发团队的协作 4. 微…

内核学习——1、list_head

双向循环链表&#xff1a;list_head 头节点head是不使用的&#xff1a; struct list_head { struct list_head *next, *prev; }; 结构体中没有数据域&#xff0c;所以一般把list_head嵌入到其他结构中使用 struct file_node { char c; struct list_head node; }; 此时&#xff…

手机铃声下载2个必备技巧,定制化铃声,彰显个性魅力

手机铃声&#xff0c;就像是独特的信号灯&#xff0c;不仅仅是通知我们来电或信息的方式&#xff0c;更是展现个人品位和魅力的武器。手机铃声下载和定制&#xff0c;让你的手机从千万舰队中脱颖而出。在接下来的文章中&#xff0c;我们将详细探讨铃声下载技巧的具体操作步骤&a…

介绍.NET 6款好看的winform开源UI库

开篇概述 在软件开发的世界里&#xff0c;用户界面&#xff08;UI&#xff09;是连接用户与程序的桥梁。对于使用.NET Framework进行WinForms应用程序开发的开发者来说&#xff0c;拥有一个美观、直观且功能丰富的UI库无疑是提升用户体验的关键。今天&#xff0c;我们将一起探索…

2024人工智能指数报告(二):技术性能

背景 从2017年开始&#xff0c;斯坦福大学人工智能研究所&#xff08;HAI&#xff09;每年都会发布一份人工智能的研究报告&#xff0c;人工智能指数报告&#xff08;AII&#xff09;&#xff0c;对上一年人工智能相关的数据进行跟踪、整理、提炼并进行可视化。这份指数报告被认…

深度学习1 -- 开头

一 前言 感觉用这玩意越来越多&#xff0c;所以想学学。不过没想好怎么学&#xff0c;也没有提纲&#xff0c;买了两本书&#xff0c;一本是深度学习入门&#xff0c;小日子写的。还有一本就是花书。还有就是回Gatech参加线上课程&#xff0c;CS7643。 CS 7643: Deep Learnin…