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

如何使用CSS实现一个纯CSS的滚动条样式？

news 2025/9/13 20:12:52

聚沙成塔·每天进步一点点

  • ⭐ 专栏简介
  • ⭐ 使用CSS实现自定义滚动条样式
  • ⭐ 写在最后

⭐ 专栏简介

前端入门之旅：探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅

欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者，这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中，我们将以问答形式每天更新，为大家呈现精选的前端知识点和常见问题解答。通过问答形式，我们希望能够更直接地回应读者们对于前端技术方面的疑问，并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具，我们将深入浅出地解释概念，并提供实际案例和练习来巩固所学内容。同时，我们也会分享一些实用技巧和最佳实践，帮助你更好地理解并运用前端开发中的各种技术。

在这里插入图片描述

不仅如此，我们还会定期推出一些项目实战教程，让你能够将所学知识应用到实际开发中。通过实际项目的练习，你将能够更好地理解前端开发的工作流程和方法论，并培养自己解决问题和独立开发的能力。我们相信，只有不断积累和实践，才能真正掌握前端开发技术。因此，请准备好迎接挑战，勇敢地踏上这段前端入门之旅！无论你是寻找职业转型、提升技能还是满足个人兴趣，我们都将全力以赴，为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧！加入前端入门之旅，成为一名出色的前端开发者！ 让我们启航前端之旅

⭐ 使用CSS实现自定义滚动条样式

要创建一个自定义的纯CSS滚动条样式，您可以使用伪元素和一些CSS属性来实现。以下是一个简单的示例，展示如何实现一个基本的自定义滚动条样式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Scrollbar</title>
<style>/* 模拟一个包含滚动内容的容器 */.scroll-container {width: 300px;height: 200px;overflow: auto;border: 1px solid #ccc;position: relative;}/* 滚动条轨道 */.scroll-container::-webkit-scrollbar-track {background-color: #f1f1f1;}/* 滚动条滑块 */.scroll-container::-webkit-scrollbar-thumb {background-color: #888;border-radius: 10px;}/* 鼠标悬停在滚动条滑块上的样式 */.scroll-container::-webkit-scrollbar-thumb:hover {background-color: #555;}/* 隐藏滚动条按钮 */.scroll-container::-webkit-scrollbar-button {display: none;}
</style>
</head>
<body><div class="scroll-container"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec sagittis dui, a pulvinar sapien. Integer aliquam ullamcorper mauris.</p><p>Ut pharetra convallis mauris, nec tincidunt orci consequat ut. Suspendisse tincidunt, odio eu tincidunt sollicitudin, justo purus volutpat massa, sit amet laoreet erat elit nec dui.</p><p>Donec consequat, elit ut finibus cursus, ex odio cursus mi, nec cursus arcu odio vel metus. Aenean a tellus in odio facilisis facilisis id eget lectus.</p></div>
</body>
</html>

在上面的示例中，我们使用了 ::-webkit-scrollbar 伪元素来针对 Webkit 内核浏览器（如 Chrome 和 Safari）自定义滚动条样式。您可以根据需求调整颜色、样式和尺寸来创建您自己的自定义滚动条样式。

请注意，不同浏览器可能有不同的滚动条样式自定义方式。上述示例适用于 Webkit 内核浏览器，其他浏览器可能需要不同的伪元素和属性。同时，一些浏览器可能会限制滚动条样式的自定义程度。

⭐ 写在最后

本专栏适用读者比较广泛，适用于前端初学者；或者没有学过前端对前端有兴趣的伙伴，亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点，所以如果你具备了前端的基础跟着本专栏学习，也是可以很大程度帮助你查漏补缺，由于博主本人是自己再做内容输出，如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我，我们一起进步，与此同时也推荐大家几份专栏，有兴趣的伙伴可以订阅一下：除了下方的专栏外大家也可以到我的主页能看到其他的专栏；

前端小游戏（免费）这份专栏将带你进入一个充满创意和乐趣的世界，通过利用HTML、CSS和JavaScript的基础知识，我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验，这个专栏都适合你。我们会从最基础的知识开始，循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习，你将学会如何运用HTML来构建页面结构，使用CSS来美化游戏界面，并利用JavaScript为游戏添加交互和动态效果。在这个专栏中，我们将涵盖各种类型的小游戏，包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程，并提供详细解释和代码示例。同时，我们也会分享一些优化技巧和最佳实践，帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能，还是对页面游戏开发感兴趣，前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

在这里插入图片描述

Vue3通透教程【从零到一】（付费） 欢迎来到Vue3通透教程！这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

在这里插入图片描述

TypeScript入门指南（免费） 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码，我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者，都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成，我们将全面覆盖各个方面。通过阅读本专栏，您将能够提升JavaScript代码的可靠性和可维护性，并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧！点击订阅TypeScript入门指南专栏

在这里插入图片描述

相关文章：

如何使用CSS实现一个纯CSS的滚动条样式？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用CSS实现自定义滚动条样式⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣…...

编程日记 2023/8/16 18:31:36

使用维纳过滤器消除驾驶舱噪音（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/8/16 18:30:35

vue所有UI库通用）tree-select 下拉多选（设置 maxTagPlaceholder 隐藏 tag 时显示的内容，支持鼠标悬浮展示更多

如果可以实现记得点赞分享&#xff0c;谢谢老铁&#xff5e; 1.需求描述 引用的下拉树形结构支持多选&#xff0c;限制选中tag的个数&#xff0c;且超过制定个数&#xff0c;鼠标悬浮展示更多已选中。 2.先看下效果图 3.实现思路 首先根据API文档&#xff0c;先设置maxTagC…...

编程日记 2023/8/16 18:29:32

进行 200 瓦太阳能 （PV） 模块设计以测量太阳能光伏阵列的电压、电流和功率、综合负荷频率和电压控制系统的方法研究（Simulink实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/8/16 18:28:30

实战：工作中对并发问题的处理 | 京东物流技术团队

1. 问题背景 问题发生在快递分拣的流程中&#xff0c;我尽可能将业务背景简化&#xff0c;让大家只关注并发问题本身。 分拣业务针对每个快递包裹都会生成一个任务&#xff0c;我们称它为 task。task 中有两个字段需要关注&#xff0c;一个是分拣中发生的异常&#xff08;exp…...

编程日记 2023/8/16 18:27:28

解决VSCode CPU高占问题的方法

如果你也遇到VSCode的CPU占用过高的问题&#xff0c;可以尝试使用官方自带的插件Bisect&#xff08;扩展二分查找&#xff09;功能来查找具体是哪个扩展出了问题。 找到“糟糕”的扩展可能很容易&#xff0c;也可能很困难。 打开扩展视图 ( CtrlShiftX )&#xff0c;禁用扩展&…...

编程日记 2023/8/16 18:26:27

tensorflow 1.x和3090、cuda部署

这里写目录标题 3090、cuda和tensorflow 1.x 3090、cuda和tensorflow 1.x 因为3090只支持cuda11.0的版本&#xff0c;而tensorflow1.已经不再维护&#xff0c;没有出支持cuda11.0的版本了。 nvidia提供了TF1.x对RTX 3090、cuda11等新硬件的支持。卸载已有的tensorflow-gpu包和…...

编程日记 2023/8/16 18:25:24

vue-photo-preview( 照片预览功能 )

安装 npm install vue-photo-preview --save 引入项目 import preview from vue-photo-preview import vue-photo-preview/dist/skin.csslet options {fullscreenEl: false //是否可以全屏预览 }; Vue.use(preview, options)如果不写options 和 Vue.use(preview,options)&…...

编程日记 2023/8/16 18:24:21

Angular 独立组件入门

Angular 独立组件入门 如果你正在学习 Angular&#xff0c;那么你可能已经听说过独立组件&#xff08;Component&#xff09;。顾名思义&#xff0c;独立组件就是可以独立使用和管理的组件&#xff0c;它们能够被包含在其他组件中或被其他组件引用。 在本文中&#xff0c;我们…...

编程日记 2023/8/16 18:23:20

Lie group 专题：Lie 群

Lie group 专题&#xff1a;Lie 群 流形 流形的定义 一个m维流形是满足以下条件的集合M&#xff1a;存在可数多个称为坐标卡&#xff08;图集&#xff09;的子集合族.以及映到的连通开子集上的一对一映射&#xff0c;,称为局部坐标映射&#xff0c;满足以下条件 坐标卡覆盖M…...

编程日记 2023/8/16 18:22:18

Vue-打印组件页面

场景: 需要将页面的局部信息打印出来&#xff0c;只在前端实现&#xff0c;不要占用后端的资源。经过百度经验&#xff0c;决定使用 print-js和html2canvas组件。 1. 下载包 npm install print-js --save npm install --save html2canvas 2. 组件内引用 <script>impo…...

编程日记 2023/8/16 18:21:17

Python爬虫——scrapy_基本使用

安装scrapy pip install scrapy创建scrapy项目&#xff0c;需要在终端里创建 注意&#xff1a;项目的名字开头不能是数字&#xff0c;也不能包含中文 scrapy startproject 项目名称 示例&#xff1a; scrapy startproject scra_baidu_36创建好后的文件 3. 创建爬虫文件&…...

编程日记 2023/8/16 18:20:16

30 | 中国高校数据分析

一、数据源 本项目使用了两个csv的数据文件，一个是中国高校（大学）的数据，一个是中国高校专业设置的数据 数据基本栏位：高校（大学）的数据高校专业设置的数据学校学校省份专业类别城市专业名称地址国家特色专业水平层次办学类别办学类型985211双一流二、数据分析目标 本…...

编程日记 2023/8/16 18:19:13

开源低代码平台Openblocks

网友 HankMeng 想看低代码工具&#xff0c;正好手上有一个&#xff1b; 什么是 Openblocks &#xff1f; Openblocks 是一个开发人员友好的开源低代码平台&#xff0c;可在几分钟内构建内部应用程序。 传统上&#xff0c;构建内部应用程序需要复杂的前端和后端交互&#xff0c;…...

编程日记 2023/8/16 18:18:12

每日汇评：黄金在 200 日移动平均线附近似乎很脆弱，关注美国零售销售

1、金价预计将巩固其近期跌势&#xff0c;至 6 月初以来的最低水平&#xff1b; 2、对美联储再次加息的押注继续限制了贵金属的上涨&#xff1b; 3、金融市场现在期待美国零售销售报告带来一些有意义的推动&#xff1b; 周二金价难以获得任何有意义的牵引力&#xff0c;并在…...

编程日记 2023/8/16 18:17:11

DFT笔记 DC/AC mode与Func

DFT scan可以分为DC和AC两种&#xff0c;区别如下图 DC模式需要ate测试机台提供test clock时钟&#xff08;最快100M&#xff09;&#xff0c;DFT工程师需要升级普通reg变成带si和so&#xff0c;se pin的reg&#xff0c;并插入扫描链&#xff08;scan chain&#xff09;&#x…...

编程日记 2023/8/16 18:16:08

docker核心操作

docker核心操作 1、docker安装（1）可选参数：（2）输出参数解释：2、docker镜像（1）拉取镜像:[https://www.docker.com/](https://www.docker.com/)3、运行docker镜像（1） 运行容器：（2） 挂载硬盘：4、docker容器的生命周期5.1、进入容器内部5.2、怎么解决Error: exec fai…...

编程日记 2023/8/16 18:15:07

《电路》基础知识入门学习笔记

文章目录&#xff1a; 一&#xff1a;电路模型和电路规律 1.电路概述 2.电路模型 3.基本电路物理量&#xff1a;电流、电压、电功率和能量 4.电流和电压的参考方向 5.电路元件—电阻 6. 电路元件—电压源和电流源 7.受控电源 8.基尔霍夫&#xff08;后面都要用这个方法…...

编程日记 2023/8/16 18:14:04

什么是P2P?

P2P (Peer-to-Peer) 是一种分布式的网络架构&#xff0c;其中各个节点&#xff08;通常被称为“peers”或“节点”&#xff09;直接进行数据共享和交换&#xff0c;而无需依赖中央服务器。P2P 网络强调平等的参与和共享&#xff0c;每个节点既可以是数据的消费者&#xff08;下…...

编程日记 2023/8/16 18:13:03

matlab RANSAC拟合多项式曲线

目录 一、功能概述1、算法概述2、主要函数3、参考文献二、代码实现三、结果展示四、参考链接本文由CSDN点云侠原创，原文链接。爬虫网站自重，把自己当个人。爬些不完整的误导别人有意思吗？？？？ 一、功能概述 1、算法概述 使用RANSAC对点进行多项式拟合。...

编程日记 2023/8/16 18:12:01

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/6/17 5:30:27

【根据当天日期输出明天的日期(需对闰年做判定)。】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:…...

编程新知 2025/9/7 11:32:34

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2025/9/2 16:59:49

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2025/9/6 15:39:02

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2025/9/9 14:59:47

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/9/9 14:51:30

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/8/12 19:32:55

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2025/9/9 10:10:16

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

编程新知 2025/7/7 16:04:22