登录 注册

滚动条调节

本贴最后更新于 352 天前，其中的信息可能已经天翻地覆

使用的是 VSCode Lite Edit 这款主题，想求个使用 CSS 调节滚动条粗细的代码片段 ，使左侧的滚动条变成右边这种的

image.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    28446 引用 • 119781 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    11155 引用 • 50662 回帖 • 52 关注
安阳 位置
30 悬赏
4 回帖
2
351 71 8 129 1 141

相关帖子

4 回帖
滚动条调节

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • NorthCJ • • 1 评论
    付费者 作者

    作者居然来了 ，太荣幸了 ，这个代码片段可以实现 ，实在是太感谢了 🌹🌹🌹

    复习中上来转转
    EmptyLight •
  • 其他回帖
  • EmptyLight • • 1 评论
    付费者

    我的字体如下：

    PixPin20250104114005.png

    同时打开了连体字，就是

    这个。把支持的符号连起来。

    要改粗就是把 ::webkit 前面的限定去掉，不止对编辑器生效。这里除了 :hover 那条应该都可以直接把 .protyle-content 类删掉对全部滚动条生效。

    服了，凭什么屏蔽 VSCode 链接，看 md 源码吧
    EmptyLight •
  • Mayrain •

    两个问题：

    1. 好奇作者你这个扭来扭曲的字体是什么呀，看起来还挺不错的！
    2. 我和 lz 的要求刚好相反，希望把滚动条改粗一些（也就是更像左边的那种），应该怎么操作呢 😭
    1 回复
  • EmptyLight • • 1 • 1 评论
    付费者

    虽然这个是 VSCode Lite 时期留下来的配置，但是不要紧，我来看看 👀

    首先打开 工作空间目录\conf\appearance\themes\siyuan-vscodelite-edit\sub\app\scrollbar.css 文件，可以看到若干以::webkit-scrollbar 结尾的样式。

    PixPin20250103201225.png

    这些就是调整滚动条样式的代码。要是我来肯定是直接注释完事，不过要写代码片段就不能这样子做。

    这里我手动测试，调出来如下代码：

    .protyle-content:hover::-webkit-scrollbar-thumb {
    opacity: unset;
    background: unset;
}

.protyle-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.protyle-content::-webkit-scrollbar-track {
    border: unset;
}

.protyle-content::-webkit-scrollbar-thumb {
    opacity: unset;
    background: unset;
    -webkit-transition: unset;
    box-sizing: content-box;
    border: 4px solid rgba(0,0,0,0);
    border-radius: var(--b3-border-radius);
    box-shadow: inset 0 0 5px 5px var(--b3-scroll-color);
}

.protyle-content::-webkit-scrollbar-thumb:hover {
    background: unset;
    border-width: 1px
}

.protyle-content::-webkit-scrollbar-thumb:active {
    background: unset;
}

    理论上应该是还原了，我还没测出问题，具体你先试试。感谢支持 VSCode Lite Edit 主题！

    2 回复
    太勤劳了 heart！
    YUNSUO •
NorthCJ
安阳
回帖
63
 帖子
28
 积分
17

近期热议

推荐标签 标签

  • AWS
    11 引用 • 28 回帖 • 1 关注
  • 新人

    让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
    新手上路，请谨慎驾驶！

    52 引用 • 228 回帖
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    232 引用 • 484 回帖 • 1 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年，是中国的 IT 社区和服务平台，为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点；但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中，从而不再需要读写 HDFS，因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 563 关注
  • Oracle

    Oracle（甲骨文）公司，全称甲骨文股份有限公司（甲骨文软件系统有限公司），是全球最大的企业级软件公司，总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年，甲骨文已超越 IBM，成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 329 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合。

    9 引用 • 75 回帖
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 285 关注
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖 • 1 关注
  • V2Ray
    1 引用 • 15 回帖 • 4 关注
  • OpenStack

    OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 8 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本，加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较（vimdiff）、语法高亮、全面的帮助系统、本地脚本（Vimscript）和便于选择的可视化模式。

    29 引用 • 66 回帖
  • abitmean

    有点意思就行了

    • 44 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 80 回帖 • 1 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 516 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 120 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用（如 Word、Excel 和 PowerPoint）与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起，可帮助你在任何设备上完成操作。

    6 引用 • 35 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    524 引用 • 4602 回帖 • 731 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 429 关注
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    14 引用 • 84 回帖
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库，并提供多种语言的 API。从 2010 年 3 月 15 日起，Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始，Redis 的开发由 Pivotal 赞助。

    285 引用 • 248 回帖
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 1 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    60 引用 • 22 回帖 • 2 关注
  • OpenCV
    15 引用 • 36 回帖 • 1 关注
  • 千千插件

    千千块（自定义块 css 和 js）
    可以用 ai 提示词来无限创作思源笔记

    32 引用 • 69 回帖
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 10 关注

最新标签