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

网页、h5默认滚动条样式重构


文章目录

  • 前言
  • 一、使用步骤
    • 1、在想要滚动的元素上设置相应的css类名
    • 2.设置样式
  • 总结


前言

此文章用于,让我自己快速设置 浏览器、h5 默认滚动条样式……


一、使用步骤

1、在想要滚动的元素上设置相应的css类名

代码如下:

<div class="list scroll-container"><p>…………</p><p>…………</p>…………
</div>

2.设置样式

代码如下:

/* 容器样式 */
.list{height: 500px; /* 记住一定要设置高度哦!*/
}/* 滚动条样式 */
.scroll-container {  overflow: hidden;  overflow-y: auto;  
}  
.scroll-container::-webkit-scrollbar-track-piece {  background-color: rgba(0, 0, 0, 0);  border-left: 1px solid rgba(0, 0, 0, 0);  
}  
.scroll-container::-webkit-scrollbar {  width: 5px;  height: 13px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;  
}  
.scroll-container::-webkit-scrollbar-thumb {  background-color: rgba(0, 0, 0, 0.2);  background-clip: padding-box;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;  min-height: 28px;  
}  
.scroll-container::-webkit-scrollbar-thumb:hover {  background-color: rgba(0, 0, 0, 0.2);  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;  
} 

该处使用的url网络请求的数据。


总结

以上就是今天的内容,三Q!

相关文章:

网页、h5默认滚动条样式重构

文章目录 前言一、使用步骤1、在想要滚动的元素上设置相应的css类名2.设置样式 总结 前言 此文章用于&#xff0c;让我自己快速设置 浏览器、h5 默认滚动条样式…… 一、使用步骤 1、在想要滚动的元素上设置相应的css类名 代码如下&#xff1a; <div class"list scro…...

香橙派AIpro测评上手指南

一、前言 首先非常荣幸受到邀请参加本次香橙派开发板的测评活动&#xff0c;除了令人眼前一亮&#xff0c;做工非常精细的开发板&#xff0c;举办方还非常贴心地准备了散热套件&#xff0c;以及烧录好系统的TF卡&#xff0c;甚至准备了电源适配器&#xff0c;数据线&#xff1…...

GBDT 算法【python,机器学习,算法】

GBDT 即 Gradient Boosting Decision Tree 梯度提升树&#xff0c; 是一种迭代的决策树算法&#xff0c;又叫 MART(Multiple Additive Regression Tree)&#xff0c; 它通过构造一组弱的学习器(树)&#xff0c;然后把多棵决策树的结果累加起来作为最终的预测输出。该算法将决策…...

软考 系统架构设计师系列知识点之SOME/IP与DDS(3)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之SOME/IP与DDS&#xff08;2&#xff09; 本文内容参考&#xff1a; 车载以太网 - SOME/IP简介_someip-CSDN博客 https://zhuanlan.zhihu.com/p/369422441 什么是SOME/IP?_someip-CSDN博客 SOME/IP 详解系列&#…...

将AI大模型装进你的手机,你愿意么?

大数据产业创新服务媒体 ——聚焦数据 改变商业 AI大模型的发展&#xff0c;有两个方向&#xff0c;一个是模型越做越大&#xff0c;以规模来提升性能。还有一个重要的方向&#xff0c;就是通过将模型做小&#xff0c;来嵌入手机、电脑等计算终端&#xff0c;这同样是值得关注…...

前端面试题12-22

12 Proxy是什么&#xff0c;有什么作用&#xff1f; Proxy 是 ES6 (ECMAScript 2015) 引入的一种元编程特性。它允许你创建一个对象&#xff0c;该对象可以拦截和定义基本操作&#xff08;例如属性查找、赋值、枚举、函数调用等&#xff09;。Proxy 提供了一种机制&#xff0c…...

【论文解读】Performance of AV1 Real-Time Mode

论文下载地址:Performance of AV1 Real-Time Mode 时间:2020.10 级别:IEEE 作者:Ludovic Roux 摘要 背景:COVID-19疫情增加了对数字互动的需求,使得实时或低延迟编解码器变得更加重要。现状:大多数编解码器,包括AV1,主要关注于编码效率,这是视频点播(VOD)的主要改…...

java处理中文脱敏

方法一&#xff0c;简单的&#xff0c;不计算文字长度去设置脱敏 public static String dataDesensitization1(String content){String regex "(.{2}).*(.{2})";return ReUtil.replaceAll(content, regex, matcher -> {try {if (CharSequenceUtil.isBlank(match…...

【Linux网络】端口及UDP协议

文章目录 1.再看四层2.端口号2.1引入linux端口号和进程pid的区别端口号是如何生成的传输层有了pid还设置端口号端口号划分 2.2问题2.3netstat 3.UDP协议3.0每学一个协议 都要讨论一下问题3.1UDP协议3.2谈udp/tcp实际上是在讨论什么&#xff1f; 1.再看四层 2.端口号 端口号(Po…...

Unity 生成模版代码

1、创建模版代码文本 using System.Collections; using System.Collections.Generic; using UnityEngine;public class ClassNameScritpItem : MonoBehaviour {public GameObject go;// Start is called before the first frame updatevoid Start(){go new GameObject();}// …...

【ai】chatgpt的plugin已经废弃

发现找不到按钮,原来是要申请: https://openai.com/index/chatgpt-plugins/ 发现申请已经跳转了,好像是废弃了? 不接受新插件了,但是openai的api 是可以继续用的。 https://openai.com/waitlist/plugins/We are no longer accepting new Plugins, builders can now create…...

2024年03月 Python(四级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试(1~6级)全部真题・点这里 一、单选题(共25题,共50分) 第1题 运行如下代码,若输入整数3,则最终输出的结果为?( ) def f(x):if x==1:s=1else:s...

多旋翼无人机机场考哪些内容?

多旋翼无人机机场考试的内容主要包括理论和实飞两部分。 理论考试主要涵盖无人机相关的知识&#xff0c;包括无人机的原理、结构、操作规范等。 实飞考试则主要考察飞行技能&#xff0c;包括飞行操作、航线规划、飞行稳定性等。 具体来说&#xff0c;实飞部分可能包括使用GPS…...

【前端每日基础】day23——箭头函数

箭头函数是ES6&#xff08;ECMAScript 2015&#xff09;引入的一种新的函数表达式语法。相比传统函数&#xff0c;箭头函数有简洁的语法&#xff0c;并且不绑定自己的this、arguments、super或new.target。以下是详细介绍箭头函数的各个方面&#xff1a; 基本语法 单参数箭头函…...

27.Java中单例模式的实现方式

一、单例模式 单例模式&#xff08;Singleton Pattern&#xff09;是一种创建型设计模式&#xff0c;它确保一个类只有一个实例&#xff0c;并提供一个全局访问点来访问这个唯一实例。 单例模式中&#xff1a; 这个类只能有一个实例这个类必须自己创建自己的唯一实例这个类必须…...

C#面:当一个线程进入一个对象的方法后,其它线程是否可以进入该对象的方法?

一个线程在访问一个对象的一个synchronized方法时&#xff1a; 另一个线程可以同时访问这个对象的非同步方法。另一个线程不可以同时访问这个对象的普通同步方法。另一个线程可以同时访问这个对象的静态同步方法 &#xff0c;即static synchronized修饰的方法 。另一个线程不可…...

express框架下后端获取req.body报错undefined

express框架下后端获取req.body报错undefined_express服务器post中data为undefine-CSDN博客 /*** 特殊说明&#xff1a;Express是一个单线程服务器器程序【必须存在指定的顺序调用,否则无法达到预期的效果】*//*** 第一步&#xff1a;创建一个Express实例对象,并且在匹配路由之…...

Element plus 低版本弹窗组件添加拖拽功能

在使用element plus 弹窗组件el-dialog 的时候&#xff0c;由于自己组件库版本过低&#xff0c;所以就会缺失某些功能&#xff0c;比如弹窗组件的可拖拽功能。因为某些原因element plus 组件库又不能升级&#xff0c;所以此时就需要自己为弹窗组件添加拖拽功能。共分为一下四个…...

计算机组成原理易混淆知识点总结(持续更新)

目录 1.机器字长&#xff0c;存储字长与指令字长 2.指令周期,机器周期,时钟周期 3.CPI,IPS,MIPS 4.翻译程序和汇编程序 5.计算机体系结构和计算机组成的区别和联系 6.基准程序执行得越快说明机器的性能越好吗? 1.机器字长&#xff0c;存储字长与指令字长 不同的机器三者…...

【STM32踩坑】HAL固件库版本过高导致烧录后无法运行问题

问题引入 目前STM32CUBEMX已经更新到了6.11版本&#xff0c;对应的固件库也一直在更新&#xff1b; 以STM32F1库为例&#xff0c;目前最新的库对应版本为1.8.5 但是我们会发现&#xff0c;如果直接使用1.8.5版本的固件库生成HAL源码后&#xff0c;烧录是可以烧录&#xff0c;但…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...