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

HOW - 在Windows浏览器中模拟MacOS的滚动条

目录

  • 一、原生 CSS 代码实现
    • 模拟 macOS 滚动条
    • 额外优化
    • 应用到某个特定容器
  • 二、Antd table中的滚动条场景
  • 三、使用第三方工具/扩展

如果你想让 Windows 里的滚动条 模拟 macOS 的效果(细窄、圆角、隐藏默认轨道)。

可以使用以下几种方案:

一、原生 CSS 代码实现

模拟 macOS 滚动条

/* 整个滚动条 */
::-webkit-scrollbar {width: 6px; /* 细窄滚动条 */height: 6px;
}/* 滚动条的轨道(macOS 是透明的,所以这里隐藏掉) */
::-webkit-scrollbar-track {background: transparent; /* 透明背景 */
}/* 滚动条滑块 */
::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.3); /* 半透明黑色 */border-radius: 10px; /* 圆角 */
}/* 滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {background: rgba(0, 0, 0, 0.5); /* 鼠标悬停时更明显 */
}

额外优化

macOS 的滚动条默认是 在滚动时才出现,你可以用 overflow: auto; + scrollbar-gutter 让它更接近 macOS:

.custom-scroll {overflow-y: auto;scrollbar-gutter: stable; /* 让内容不跳动 */
}

如果你希望在 不滚动时隐藏滚动条,可以用:

::-webkit-scrollbar {display: none;
}

⚠️ 注意:这样会完全隐藏滚动条,用户无法手动拖动滚动条,建议仅在特殊场景下使用。

应用到某个特定容器

如果你不想全局生效,只想对某个 div 应用 macOS 风格:

.macos-scrollbar {overflow-y: auto;
}.macos-scrollbar::-webkit-scrollbar {width: 6px;
}.macos-scrollbar::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.3);border-radius: 10px;
}

然后在 HTML 里:

<div class="macos-scrollbar" style="height: 300px; overflow-y: auto;">这里是很多很多的内容...
</div>

这样,Windows 上的滚动条就会变得像 macOS 一样 细窄、圆润、隐蔽,更加美观。

二、Antd table中的滚动条场景

在使用一些组件库如 Antd 时,内部组件存在滚动场景时,如table组件,会发现滚动条没生效,这里需要设置:

.ant-table-wrapper .ant-table {scrollbar-color: unset;
}

因为通过定位元素可以发现table自己设置了 scrollbar-color 属性。

三、使用第三方工具/扩展

对于 React 项目,可以通过以下 GitHub 工具实现滚动条的自定义(尤其是模拟 macOS 风格),以下是推荐的高质量工具:

  • react-custom-scrollbars

https://github.com/malte-wessel/react-custom-scrollbars

  • OverlayScrollbars

https://github.com/KingSora/OverlayScrollbars

  • react-perfect-scrollbar

https://github.com/mdbootstrap/perfect-scrollbar

  • smooth-scrollbar-react

https://github.com/nghiepdev/smooth-scrollbar-react

  • simplebar-react

https://github.com/grsmto/simplebar

相关文章:

HOW - 在Windows浏览器中模拟MacOS的滚动条

目录 一、原生 CSS 代码实现模拟 macOS 滚动条额外优化应用到某个特定容器 二、Antd table中的滚动条场景三、使用第三方工具/扩展 如果你想让 Windows 里的滚动条 模拟 macOS 的效果&#xff08;细窄、圆角、隐藏默认轨道&#xff09;。 可以使用以下几种方案&#xff1a; 一…...

Unity 打包后EXE运行出现Field to Load il2cpp的一种情况

Unity版本2021.3.13f1c1 #if DEVELOPMENT_BUILDA1 A1 10600;#else#endif 使用 #if DEVELOPMENT_BUILD然后在下面面板使用Development Build。打包后会运行游戏EXE出现Field to Load il2cpp。 解决办法是换成IF ELSE&#xff0c;自己代码设置个开关、 文心一言&#xff1a; …...

Windows 环境下 Nginx、PHP 与 ThinkPHP 开发环境搭建

Windows 环境下 Nginx、PHP 与 ThinkPHP 开发环境搭建 目录 安装 Nginx 和 PHP配置 Nginx配置 PHP启动服务ThinkPHP 配置常见问题排查 1. 安装 Nginx 和 PHP 安装 Nginx 访问 Nginx 官网 下载 Windows 版本解压到指定目录&#xff0c;如 C:\nginx 安装 PHP 访问 PHP 官网…...

Redis100道高频面试题

一、Redis基础 Redis是什么&#xff1f;主要应用场景有哪些&#xff1f; Redis 是一个开源的、基于内存的数据结构存储系统&#xff0c;支持多种数据结构&#xff08;如字符串、哈希、列表、集合等&#xff09;&#xff0c;可以用作数据库、缓存和消息中间件。 主要应用场景&…...

登录服务器后如何找到对应的drupal所在的文件夹

在服务器上找不到 Drupal 安装目录的原因可能有以下几种&#xff1a; 多站点配置&#xff1a; Drupal 支持多站点设置&#xff0c;即在同一安装中托管多个网站。在这种配置下&#xff0c;每个站点都有自己的设置和文件夹&#xff0c;通常位于 sites 目录下。例如&#xff0c;站…...

win32汇编环境,窗口程序中使控件子类化的示例一

;运行效果 ;win32汇编环境,窗口程序中使编辑框控件子类化的示例一 ;窗口子类化&#xff0c;就是把某种控件&#xff0c;自已再打造一遍&#xff0c;加入自已的功能。比如弄个特殊形状的按钮&#xff0c;或只能输入特殊字符的编辑框 ;当然&#xff0c;一般来说&#xff0c;这都是…...

专业工具,杜绝一切垃圾残留!

在安装大多数软件时均会在系统注册表中创建相应的条目。如果卸载后仍然存在注册表残留&#xff0c;可能会导致再次安装时出现失败&#xff0c;同时也会对系统性能和存储空间产生负面影响。常见的卸载残留包括注册表项、程序文件夹、用户数据文件夹、临时文件以及相关插件等。 …...

java 实现简易基于Dledger 的选举

java 实现简易基于Dledger 的选举 1. 定义 Dledger 节点类&#xff0c;包含节点的状态、日志存储、选举和日志复制逻辑 import java.util.ArrayList; import java.util.List; import java.util.Random; import java.util.concurrent.Executors; import java.util.concurrent.S…...

大数据“调味“ ,智慧“添香“,看永洪科技助力绝味食品数字化新征程

近年来&#xff0c;随着国家数字化政策不断出台、新兴技术不断进步、企业内生需求持续释放&#xff0c;数字化转型逐步成为企业实现高质量发展的必由之路&#xff0c;成为企业实现可持续发展乃至弯道超车的重要途径。 在全国数字化浪潮驱动下&#xff0c;以人工智能、互联网、…...

【嵌入式】MQTT

MQTT 文章目录 MQTT安装简介MQTT客户端代码 安装 安装Paho MQTT C库: sudo apt-get install libpaho-mqtt3-dev头文件包含&#xff1a; #include "MQTTClient.h"编译选项&#xff1a; gcc -o $ $^ -lpaho-mqtt3c简介 MQTT协议全称是&#xff08;Message Queuing…...

vue原理面试题

以下是一些关于Vue原理的面试题: 一、虚拟DOM与响应式系统 Vue中的虚拟DOM是如何工作的? 答案: 当Vue组件的数据发生变化时,Vue首先会在虚拟DOM中构建一个新的虚拟DOM树来表示更新后的组件结构。然后,Vue会将新的虚拟DOM树与旧的虚拟DOM树进行比较(这个过程称为Diff算法…...

office集成deepseek插件,office集成deepseek教程(附安装包)

文章目录 前言一、下载与安装OfficeAI 助手二、获取 DeepSeek 的 API key三、在 OfficeAI 助手中配置 DeepSeek API key四、使用 OfficeAI 助手功能 前言 本教程将为你详细讲解 Office 集成 DeepSeek 的安装步骤和使用方法&#xff0c;助你轻松拥抱智能办公新时代&#xff0c;…...

行业洞察|安踏、迪桑特、始祖鸟、昂跑、lululemon等运动户外品牌的「营销创新和会员运营」对比解读

商派助力国际知名鞋品牌OMS系统全面升级&#xff0c;拓展业务类型和营销玩法&#xff01; 一、业务模式创新&#xff1a;打破传统边界&#xff0c;构建多维竞争力 近年来&#xff0c;户外运动品牌在业务模式上的革新呈现三大趋势&#xff1a;DTC模式深化、多品牌矩阵重构、技术…...

小鹏汽车申请注册“P7 Ultra”商标 或为P7车型升级版铺路

大湾区经济网品牌工程频道报道&#xff0c;据企查查APP显示&#xff0c;广东小鹏汽车科技有限公司近日提交“P7 Ultra”商标注册申请&#xff0c;国际分类为运输工具&#xff0c;当前状态为“注册申请中”。业内推测&#xff0c;此举或为小鹏P7车型高端版本量产上市做准备。 作…...

数列极限入门习题

数列极限入门习题 lim ⁡ n → ∞ ( 1 1 2 1 3 ⋯ 1 n ) 1 n \lim\limits_{n\rightarrow\infty}(1 \frac{1}{2}\frac{1}{3}\cdots\frac{1}{n})^{\frac{1}{n}} n→∞lim​(121​31​⋯n1​)n1​ lim ⁡ n → ∞ ( 1 n 1 1 n 2 ⋯ 1 n n ) \lim\limits_{n\rightarrow\…...

ubuntu部署gitlab-ce及数据迁移

ubuntu部署gitlab-ce及数据迁移 进行前梳理: 在esxi7.0 Update 3 基础上使用 ubuntu22.04.5-server系统对 gitlab-ce 16.10进行部署,以及将gitlab-ee 16.9 数据进行迁移到gitlab-ce 16.10 进行后总结: 起初安装了极狐17.8.3-jh 版本(不支持全局中文,就没用了) …...

批量设置 Word 样式,如字体信息、段落距离、行距、页边距等信息

在 Word 文档中&#xff0c;我们可以做各种样式的处理。比如设置 Word 文档的字体样式、设置 Word 文档的段落样式以及设置 Word 文档的页面样式。我们通常可以在 Office 中完成这些操作&#xff0c;相信绝大部分场景我们也是这样完成的。但是如果我们手上有 1000 个 Word 文档…...

【论文分析】语义驱动+迁移强化学习:无人机自主视觉导航的高效解决方案(语义驱动的无人机自主视觉导航)

论文阅读&#xff1a;《Semantic-Driven Autonomous Visual Navigation for Unmanned Aerial Vehicles》语义驱动的无人机自主视觉导航 1. 引言 这篇论文《Semantic-Driven Autonomous Visual Navigation for Unmanned Aerial Vehicles》发表在《IEEE Transactions on Indust…...

JDK官网安装教程 Windows

文章目录 概要整体架构流程 概要 JDK 是 Java 开发的基础&#xff0c;无论是开发桌面应用、Web 应用、移动应用&#xff0c;还是大数据、云计算相关项目&#xff0c;都需要先安装 JDK 整体架构流程 第一步&#xff0c;进入官网 Java Downloads | Oracle 中国 ①可以直接复…...

MR30系列分布式I/O:高稳定与高精准赋能锂电池覆膜工艺革新

在新能源行业高速发展的背景下&#xff0c;锂电池生产工艺对自动化控制的精准性和可靠性提出了更高要求。作为锂电池生产中的关键环节&#xff0c;覆膜工艺直接关系到电池的绝缘性能、安全性及使用寿命。面对复杂的工艺控制需求&#xff0c;明达技术MR30系列分布式I/O模块凭借其…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...