外部统一设置了::-webkit-scrollbar { display: none; }如何单独给特定元素开启滚动条设置样式-web页面滚动条样式设置

news/2024/5/3 12:00:54/文章来源:https://blog.csdn.net/JackieDYH/article/details/133790629

如果你在外部统一设置了​​::-webkit-scrollbar { display: none; }​​​来隐藏滚动条,但是想要在​​.lever​​元素中单独开启滚动条的样式,你可以使用CSS的级联选择器来覆盖外部样式。

以下是一个示例,展示如何给​​.lever​​单独开启滚动条的样式:

/* 外部样式统一隐藏滚动条 */
::-webkit-scrollbar {display: none;
}/* 单独给 .lever 元素开启滚动条样式 */
.lever {padding-top: 17px;height: 290px;overflow-y: auto;scrollbar-width: thin;scrollbar-color: #888 #f1f1f1;
}.lever::-webkit-scrollbar {display: initial;width: 8px;
}.lever::-webkit-scrollbar-track {background-color: #f1f1f1;
}.lever::-webkit-scrollbar-thumb {background-color: #888;border-radius: 4px;
}.lever::-webkit-scrollbar-thumb:hover {background-color: #555;
}

在上述代码中,我们首先使用​​::-webkit-scrollbar​​选择器来隐藏滚动条。然后,在​​.lever​​元素的样式中,我们使用​​scrollbar-width​​和​​scrollbar-color​​属性来设置滚动条的宽度和颜色。

接下来,我们使用​​.lever::-webkit-scrollbar​​选择器来重新显示滚动条,并设置滚动条的样式。

通过这种方式,你可以在​​.lever​​元素中单独开启滚动条的样式,而不受外部样式的影响。

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

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

相关文章

什么是实验室超声消泡机?工作原理是怎样的?

超声波消泡设备也叫超声波脱气机、超声波消泡机、超声波消泡器。超声波在液体中产生空化作用,使得液体中溶解的气体(如:空气)不断凝聚,成为很细小的气泡,最后成为球状气泡脱离液体表面,从而达到液体脱气、液体消泡的目的。 实验室超声消泡机工作原理: …

13年测试老鸟,性能测试内存泄露——案例分析(超细整理)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、环境配置 1&a…

第二证券:国际油价大幅上涨 后市恐难持续走高

上个买卖周,受巴以冲突影响,原油商场成为各方关注的焦点。到上星期五收盘,布伦特原油周内涨幅达7%以上,为本年2月以来最大周涨幅,WTI原油周内累计上涨近6%。业内人士认为,其时地缘要素是导致油价出现异动的…

systemverilog/uvm的 blog https://www.amiq.com/consulting/blog/

有很多systemverilog/uvm的 blog https://www.amiq.com/consulting/blog/

字符串排序程序

字符串排序程序,对一个字符串中的数值进行从小到大的排序 例如排序前给定的字符串为" 20 78 9 -7 88 36 29" 排序后: -7 9 20 29 36 78 88 要求使用包装类对数值类型的字符串转换成整型进行排序。 public class StringSort {public static vo…

SpringBoot学习日记

Spring程序与SpringBoot程序对比 SpringBoot程序优点 起步依赖(简化依赖配置)自动装配(简化常用工程相关配置)辅助功能(内置服务器,......) 内嵌Tomcat REST风格 REST简介 REST,表…

.Net Core 6 运行环境手动安装流程

安装.NET Core 6 概述 在开始之前,我们首先需要了解一下整个安装过程的流程。下面的表格将展示安装.NET Core 6的步骤以及每一步需要做的事情。 步骤 动作 说明 1 下载.NET Core 6 SDK 从官方网站下载.NET Core 6 SDK安装包 2 安装.NET Core 6 SDK …

山西电力市场日前价格预测【2023-10-16】

日前价格预测 预测说明: 如上图所示,预测明日(2023-10-16)山西电力市场全天平均日前电价为356.38元/MWh。其中,最高日前电价为502.82元/MWh,预计出现在18: 30。最低日前电价为224.63元/MWh,预计…

长沙上市公司董秘联谊会,来啦!

上市公司的数量,是判断一座城市经济实力的重要指标。 在当前复杂的竞争环境中,提升上市公司的数量和质量,以产业思维促进城市内外的上市公司合作交流,是城市提升经济综合实力的有效举措。 10月13日,在由长沙市委统战…

享搭低代码平台:加速企业应用开发,轻松搭建表单和报表

在当今快节奏的商业环境中,企业需要快速响应市场需求并提供高效的解决方案。然而,传统的应用开发过程繁琐、耗时,并且需要专业的编程技能。为了解决这些问题,享搭低代码平台应运而生。本文将详细介绍享搭低代码平台的特点和优势&a…

Android Studio Giraffe | 2022.3.1

Android Gradle 插件和 Android Studio 兼容性 Android Studio 构建系统以 Gradle 为基础,并且 Android Gradle 插件 (AGP) 添加了几项专用于构建 Android 应用的功能。下表列出了各个 Android Studio 版本所需的 AGP 版本。 如果您的项目不受某个特定版本的 Andr…

springboot+html实现简单注册登录

前端&#xff1a; register.html <!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>register</title><link rel"stylesheet" type"text/css" href"/css/style.css&…

智慧水利:山海鲸数字孪生的革新之路

一、概念 什么是港口&#xff1f; "港口"通常指的是一个水域或岸边的设施&#xff0c;用于装载、卸载、储存和处理货物、以及提供与海上、河流或湖泊交通相关的服务。港口可以包括各种类型的码头、码头设备、仓库、货物运输设施、以及各种管理和物流设施。 什么是数…

Protocols/面向协议编程, DependencyInjection/依赖式注入 的使用

1. Protocols 定义实现协议&#xff0c;面向协议编码 1.1 创建面向协议实例 ProtocolsBootcamp.swift import SwiftUI/// 颜色样式协议 protocol ColorThemeProtocol {var primary: Color { get }var secondary: Color { get }var tertiary: Color { get } }struct DefaultCol…

UPS监控技术,你一定要试试,太绝了!

UPS&#xff08;不间断电源&#xff09;监控系统是一种关键的技术&#xff0c;用于监视、管理和维护不间断电源设备&#xff0c;以确保电力供应的稳定性和可用性。这对于各种组织和企业来说至关重要&#xff0c;因为电力中断可能导致生产中断、数据丢失和设备损坏&#xff0c;对…

语音识别whisper的介绍、安装、错误记录

介绍 Whisper是OpenAI于2022年9月份开源的通用的语音识别模型。它是在各种音频的大型数据集上训练的模型&#xff0c;也是一个可以执行多语言语音识别、语音翻译和语言识别的多任务模型。 论文链接&#xff1a;https://arxiv.org/abs/2212.04356 github链接&#xff1a;https:…

这三大爆款开源项目竟出自同一个20人的小公司?

环界云计算是一家非常小的公司&#xff0c;在成立不足两年的时间里&#xff0c;便孵化出三个备受瞩目的开源项目&#xff1a;Sealos、Laf、FastGPT。而更让人惊叹的是&#xff0c;这家公司只有 21 名员工。 项目概览 Sealos&#xff1a;拥有 11,000 颗 Star&#xff0c;这是一…

NNDL:作业3:分别使用numpy和pytorch实现FNN例题

对比【numpy】和【pytorch】程序&#xff0c;总结并陈述。 激活函数Sigmoid用PyTorch自带函数torch.sigmoid()&#xff0c;观察、总结并陈述。 激活函数Sigmoid改变为Relu&#xff0c;观察、总结并陈述。 损失函数MSE用PyTorch自带函数 t.nn.MSELoss()替代&#xff0c;观察、总…

vs studio Ctrl+D 快捷键失效(无法复制行)

打开 调试/选项/环境/键盘&#xff0c;然后设置如下 快去试试吧

大坑-MATLAB图片转存时需注意的点

MATLAB中图片的保存和转存有一个巨大的陷阱&#xff0c;我也是在吃了大亏后发现的&#xff0c;正常情况下&#xff0c;MATLAB跑完实验&#xff0c;生成的图片如下 放大后这样 可以方便修改坐标轴标题&#xff0c;最初我就是因为想修改坐标轴标题才给它放大的&#xff0c;因为…