网页、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.设置样式 总结 前言 此文章用于,让我自己快速设置 浏览器、h5 默认滚动条样式…… 一、使用步骤 1、在想要滚动的元素上设置相应的css类名 代码如下: <div class"list scro…...
香橙派AIpro测评上手指南
一、前言 首先非常荣幸受到邀请参加本次香橙派开发板的测评活动,除了令人眼前一亮,做工非常精细的开发板,举办方还非常贴心地准备了散热套件,以及烧录好系统的TF卡,甚至准备了电源适配器,数据线࿱…...
GBDT 算法【python,机器学习,算法】
GBDT 即 Gradient Boosting Decision Tree 梯度提升树, 是一种迭代的决策树算法,又叫 MART(Multiple Additive Regression Tree), 它通过构造一组弱的学习器(树),然后把多棵决策树的结果累加起来作为最终的预测输出。该算法将决策…...
软考 系统架构设计师系列知识点之SOME/IP与DDS(3)
接前一篇文章:软考 系统架构设计师系列知识点之SOME/IP与DDS(2) 本文内容参考: 车载以太网 - SOME/IP简介_someip-CSDN博客 https://zhuanlan.zhihu.com/p/369422441 什么是SOME/IP?_someip-CSDN博客 SOME/IP 详解系列&#…...
将AI大模型装进你的手机,你愿意么?
大数据产业创新服务媒体 ——聚焦数据 改变商业 AI大模型的发展,有两个方向,一个是模型越做越大,以规模来提升性能。还有一个重要的方向,就是通过将模型做小,来嵌入手机、电脑等计算终端,这同样是值得关注…...
前端面试题12-22
12 Proxy是什么,有什么作用? Proxy 是 ES6 (ECMAScript 2015) 引入的一种元编程特性。它允许你创建一个对象,该对象可以拦截和定义基本操作(例如属性查找、赋值、枚举、函数调用等)。Proxy 提供了一种机制,…...
【论文解读】Performance of AV1 Real-Time Mode
论文下载地址:Performance of AV1 Real-Time Mode 时间:2020.10 级别:IEEE 作者:Ludovic Roux 摘要 背景:COVID-19疫情增加了对数字互动的需求,使得实时或低延迟编解码器变得更加重要。现状:大多数编解码器,包括AV1,主要关注于编码效率,这是视频点播(VOD)的主要改…...
java处理中文脱敏
方法一,简单的,不计算文字长度去设置脱敏 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实际上是在讨论什么? 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...
多旋翼无人机机场考哪些内容?
多旋翼无人机机场考试的内容主要包括理论和实飞两部分。 理论考试主要涵盖无人机相关的知识,包括无人机的原理、结构、操作规范等。 实飞考试则主要考察飞行技能,包括飞行操作、航线规划、飞行稳定性等。 具体来说,实飞部分可能包括使用GPS…...
【前端每日基础】day23——箭头函数
箭头函数是ES6(ECMAScript 2015)引入的一种新的函数表达式语法。相比传统函数,箭头函数有简洁的语法,并且不绑定自己的this、arguments、super或new.target。以下是详细介绍箭头函数的各个方面: 基本语法 单参数箭头函…...
27.Java中单例模式的实现方式
一、单例模式 单例模式(Singleton Pattern)是一种创建型设计模式,它确保一个类只有一个实例,并提供一个全局访问点来访问这个唯一实例。 单例模式中: 这个类只能有一个实例这个类必须自己创建自己的唯一实例这个类必须…...
C#面:当一个线程进入一个对象的方法后,其它线程是否可以进入该对象的方法?
一个线程在访问一个对象的一个synchronized方法时: 另一个线程可以同时访问这个对象的非同步方法。另一个线程不可以同时访问这个对象的普通同步方法。另一个线程可以同时访问这个对象的静态同步方法 ,即static synchronized修饰的方法 。另一个线程不可…...
express框架下后端获取req.body报错undefined
express框架下后端获取req.body报错undefined_express服务器post中data为undefine-CSDN博客 /*** 特殊说明:Express是一个单线程服务器器程序【必须存在指定的顺序调用,否则无法达到预期的效果】*//*** 第一步:创建一个Express实例对象,并且在匹配路由之…...
Element plus 低版本弹窗组件添加拖拽功能
在使用element plus 弹窗组件el-dialog 的时候,由于自己组件库版本过低,所以就会缺失某些功能,比如弹窗组件的可拖拽功能。因为某些原因element plus 组件库又不能升级,所以此时就需要自己为弹窗组件添加拖拽功能。共分为一下四个…...
计算机组成原理易混淆知识点总结(持续更新)
目录 1.机器字长,存储字长与指令字长 2.指令周期,机器周期,时钟周期 3.CPI,IPS,MIPS 4.翻译程序和汇编程序 5.计算机体系结构和计算机组成的区别和联系 6.基准程序执行得越快说明机器的性能越好吗? 1.机器字长,存储字长与指令字长 不同的机器三者…...
【STM32踩坑】HAL固件库版本过高导致烧录后无法运行问题
问题引入 目前STM32CUBEMX已经更新到了6.11版本,对应的固件库也一直在更新; 以STM32F1库为例,目前最新的库对应版本为1.8.5 但是我们会发现,如果直接使用1.8.5版本的固件库生成HAL源码后,烧录是可以烧录,但…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣(LeetCode) 思路: 笔者写过很多次这道题了,不想写题解了,大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
短视频矩阵系统文案创作功能开发实践,定制化开发
在短视频行业迅猛发展的当下,企业和个人创作者为了扩大影响力、提升传播效果,纷纷采用短视频矩阵运营策略,同时管理多个平台、多个账号的内容发布。然而,频繁的文案创作需求让运营者疲于应对,如何高效产出高质量文案成…...
【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解
一、前言 在HarmonyOS 5的应用开发模型中,featureAbility是旧版FA模型(Feature Ability)的用法,Stage模型已采用全新的应用架构,推荐使用组件化的上下文获取方式,而非依赖featureAbility。 FA大概是API7之…...
