当前位置: 首页 > 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模块凭借其…...

GeographicLib:高精度大地测量计算C++库架构解析与实战指南

GeographicLib&#xff1a;高精度大地测量计算C库架构解析与实战指南 【免费下载链接】geographiclib Main repository for GeographicLib 项目地址: https://gitcode.com/gh_mirrors/ge/geographiclib GeographicLib是一个专为大地测量和地理空间计算设计的C库&#xf…...

ChatGLM3-6B企业实操:离线环境下的技术问答机器人部署

ChatGLM3-6B企业实操&#xff1a;离线环境下的技术问答机器人部署 1. 项目概述 在当今企业环境中&#xff0c;数据安全和响应速度是技术问答系统的核心需求。传统的云端AI服务虽然方便&#xff0c;但存在数据泄露风险、网络依赖性强、响应延迟高等问题。特别是对于金融、医疗…...

深入解析Triton Server的Backend插件机制与自定义开发实践

1. Triton Server与Backend插件机制概述 第一次接触Triton Server时&#xff0c;最让我困惑的就是它的Backend机制。简单来说&#xff0c;Triton就像一个万能插座&#xff0c;而各种Backend就是不同标准的插头。比如你用PyTorch训练了个模型&#xff0c;Triton的pytorch_backen…...

程序替换与shell

程序替换函数execlexeclpexecvexecvpexecvpeexecle一共介绍七个函数 这里全都是以exec开头的 执行任何程序&#xff0c; 需要&#xff1a; 1.找到它 加载它&#xff08;路劲加程序名&#xff09; 2.怎么执行&#xff08;例如ls,你想带什么选项呀&#xff0c;如 -l -a -d之类&a…...

vscode如何添加ollama本地模型-实现token自由

vscode一直支持的都是云端闭源的模型&#xff0c;例如 GPT Claude等等&#xff0c;当这些闭源模型的免费额度用完之后&#xff0c;则需要付费继续使用。本文介绍的是vscode接入ollama的本地模型&#xff0c;从而实现token自由。 ollama 首先需要到ollama的官网下载ollama应用…...

影墨·今颜GPU算力适配:RTX 4090单卡实测每秒1.8张1024x1536图

影墨今颜GPU算力适配&#xff1a;RTX 4090单卡实测每秒1.8张1024x1536图 1. 引言&#xff1a;当顶级AI影像遇上顶级显卡 如果你是一位内容创作者&#xff0c;或者对AI生成人像有浓厚兴趣&#xff0c;那么“影墨今颜”这个名字最近可能已经进入了你的视野。它被描述为一款融合…...

python复习--进程相关--is_alive()

一、Process.is_alive() is_alive() 是 multiprocessing.Process 提供的方法&#xff0c;用于 判断进程当前是否仍在运行。 process.is_alive()返回值&#xff1a; True → 进程正在运行False → 进程未启动 或 已经结束 二、进程生命周期与 is_alive() 一个 Process 对象…...

Pixel Aurora Engine效果展示:青蓝+明黄配色系像素画作视觉冲击力解析

Pixel Aurora Engine效果展示&#xff1a;青蓝明黄配色系像素画作视觉冲击力解析 1. 视觉震撼力解析 Pixel Aurora Engine通过精心设计的青蓝明黄配色方案&#xff0c;创造出极具视觉冲击力的像素艺术作品。这种色彩组合源自经典16位游戏的美学理念&#xff0c;但通过现代AI技…...

Lychee-rerank-mm在音乐推荐中的创新应用

Lychee-rerank-mm在音乐推荐中的创新应用 1. 引言 你有没有遇到过这样的情况&#xff1a;在音乐平台上听到一首很喜欢的歌&#xff0c;想找类似的音乐&#xff0c;但系统推荐的歌曲却总是差强人意&#xff1f;要么封面风格完全不搭&#xff0c;要么歌词主题南辕北辙&#xff…...

PasteMD体验报告:极简界面+强大功能,这才是生产力工具该有的样子

PasteMD体验报告&#xff1a;极简界面强大功能&#xff0c;这才是生产力工具该有的样子 1. 重新定义"文本整理"&#xff1a;当AI成为你的第二大脑 每天&#xff0c;我们都在与各种杂乱文本搏斗&#xff1a;会议速记、技术日志、网页摘录、临时灵感...这些内容往往以…...