当前位置: 首页 > news >正文

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

如果你在外部统一设置了​​::-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​​元素中单独开启滚动条的样式,而不受外部样式的影响。

相关文章:

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

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

【计算机网络】网络原理

目录 1.网络的发展 2.协议 3.OSI七层网络模型 4.TCP/IP五层网络模型及作用 5.经典面试题 6.封装和分用 发送方(封装) 接收方(分用) 1.网络的发展 路由器:路由指的是最佳路径的选择。一般家用的是5个网口,1个WAN口4个LAN口(口:端口)。可…...

力扣第39题 组合总和 c++ 回溯剪枝题

题目 39. 组合总和 中等 相关标签 数组 回溯 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target ,找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 ,并以列表形式返回。你可以按 任意顺序 返回这些组合。 cand…...

qt软件正常运行的崩溃了定位行号方法

软件(debug版exe或者release版exe)在正常运行状态下(不是gdb调试运行),如果软件崩掉,那么会直接闪退,软件什么也做不了,此时无法保存软件中的状态信息,此外,也…...

软件工程与计算总结(十五)详细设计中面向对象方法下的信息隐藏

软件工程与计算总结(十三)详细设计中的模块化与信息隐藏 之前的博客中,模块需要隐藏的决策主要由“职责的实现”and“实现的变更”两类,在面向对象方法中,需要做到的就是: 封装类的职责,隐藏职…...

鸿蒙初体验

下载与安装DevEco Studio 在HarmonyOS应用开发学习之前,需要进行一些准备工作,首先需要完成开发工具DevEco Studio的下载与安装以及环境配置。 进入DevEco Studio下载官网,单击“立即下载”进入下载页面。 DevEco Studio提供了Windows版本和…...

hive复合类型的数据查询

hive数据表创建-CSDN博客 --第一个名字以M开头的 访问数组array 数组( array) 引用方式 列名 [ 元素索引 _ 以 0 开始 ] select * from emp where emp_name[0] rlike "^M"; -- 出生日期是在 5 几年 访问 Map map 引用方式 列名 ["Key"] selec…...

Notes/Domino 14 Early Access Drop3发布

大家好,才是真的好。 其实上周,就是国庆假期的时候,HCL Notes/Domino 14 Early Access Drop3(以下简称EA3)就已经发布,而且和传说中的一样,带来了数项惊人的新特性。 我们先讲讲这一版本新特性…...

前端、后端开发者常用到的免费API整理

以下是我整理的前端、后端工程师在开发中经常使用到的API接口,希望能帮到大家~ 手机号码归属地:可根据手机号码查询其省市区、运营商区号行政区划代码等信息。 上亿条数据囊括最新的170、166、147等号段,更新及时、准确度高。空号检测&#…...

【LeetCode高频SQL50题-基础版】打卡第9天:第46~50题

文章目录 【LeetCode高频SQL50题-基础版】打卡第9天:第46~50题⛅前言患某种疾病的患者🔒题目🔑题解 第二高的薪水🔒题目🔑题解 按日期分组销售产品🔒题目🔑题解 列出指定时间段内所有的下单产品…...

中断机制-通过volatile实现线程中断停止

4.1.4 大厂面试题中断机制考点 如何停止中断运行中的线程? 通过一个volatile变量实现 package com.nanjing.gulimall.zhouyimo.test;import java.util.concurrent.TimeUnit;/*** author zhou* version 1.0* date 2023/10/15 2:34 下午*/ public class InterruptD…...

Elasticsearch 8.11 中的合并更少,摄取更快

作者:ADRIEN GRAND Elasticsearch 8.11 改进了管理索引缓存的方式,从而减少了段合并。 我们对 Elasticsearch 8.11 从索引缓存回收内存的方式进行了重大更改,这有助于减少合并开销,从而加快索引速度。 使用我们的日志跟踪&#x…...

算法村开篇

大家好我是苏麟从今天开始我将带来算法的一些习题和心得体会等等...... 算法村介绍 我们一步步地学习算法本专栏会以闯关的方式来学习算法 循序渐进地系统的学习算法并掌握大部分面试知识 , 期待和大家一起进步 . 索大祝大家学有所成 , 前程似锦....

Leetcode—136.只出现一次的数字【简单】

2023每日刷题&#xff08;二&#xff09; Leetcode—136.只出现一次的数字 位运算法 实现代码 int singleNumber(int* nums, int numsSize){int i 0;int res 0;for(; i < numsSize; i) {res ^ nums[i];}return res; }运行结果 之后我会持续更新&#xff0c;如果喜欢我的…...

关于RNNoise、webrtc_ns、三角带通滤波器、对数能量

语音特征参数MFCC提取过程详解 其中讲解了&#xff1a;三角带通滤波器 、计算每个滤波器组输出的对数能量、对数能量、经离散余弦变换&#xff08;DCT&#xff09;得到MFCC系数 推荐阅读某乎这位大佬的全部文章&#xff1a; 下面是几篇出自这位大佬的很好的文章&#xff1a; …...

c语言练习89:链表的使用

链表的使用 虽然有这么多的链表的结构&#xff0c;但是我们实际中最常⽤还是两种结构&#xff1a; 单链表 和 双向带头循环链表 1. ⽆头单向⾮循环链表&#xff1a;结构简单&#xff0c;⼀般不会单独⽤来存数据。实际中更多是作为其他数据结 构的⼦结构&#xff0c;如哈希桶、…...

ArkTS及openHarmony

补充 padding&#xff1a;内边距&#xff0c;也就是盒子边和盒子内部的距离 margin&#xff1a;外边距&#xff0c;也就是盒子和盒子的距离 openHarmony应用开发及UI界面 常用布局 Row 水平线性布局核心代码 子控件会共享同一行&#xff0c;也就是都在同一行内 Preview C…...

Idea怎么配置Maven才能优先从本地仓库获取依赖

网上的方法 : 在设置中搜索 Runner ,在VM Option中设置参数 -DarchetypeCataloginternal删除 解压后的依赖包中的 _remote.repositories m2e-lastUpdated.properties *.lastUpdated 文件。 上边都没有效果 最终的解决方法&#xff0c;修改maven配置文件settings.xml 主要两个…...

聊聊HttpClient的DnsResolver

序 本文主要研究一下HttpClient的DnsResolver DnsResolver org/apache/http/conn/DnsResolver.java /*** Users may implement this interface to override the normal DNS lookup offered* by the OS.** since 4.2*/ public interface DnsResolver {/*** Returns the IP a…...

剑指智能驾驶,智己LS6胜算几何?

监制 | 何玺 排版 | 叶媛 10月12日&#xff0c;IM智己旗下的新车智己LS6宣布上市。 新车型搭载尖端科技多项&#xff0c;其中以“全画幅数字驾舱屏”、和城市高阶智能辅助驾驶为核心的智驾技术&#xff0c;更是引来众多用户关注。 01 新能源新卷王智己LS6 智己LS6一发布就…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...