登录 注册

滚动条调节

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

image.png

  • 思源笔记

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

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

    24506 引用 • 100273 回帖
  • Q&A

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

    9253 引用 • 42092 回帖 • 119 关注
安阳 位置
30 悬赏
4 回帖
2
182 61 76 44

相关帖子

4 回帖
滚动条调节

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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 • • 1 评论
    付费者 作者

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

    复习中上来转转
    EmptyLight •
  • Mayrain •

    两个问题：

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

    我的字体如下：

    PixPin20250104114005.png

    同时打开了连体字，就是

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

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

    服了，凭什么屏蔽 VSCode 链接，看 md 源码吧
    EmptyLight •
NorthCJ
安阳
回帖
17
 帖子
12
 积分
397

近期热议

推荐标签 标签

  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • IPFS

    IPFS（InterPlanetary File System，星际文件系统）是永久的、去中心化保存和共享文件的方法，这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    21 引用 • 245 回帖 • 232 关注
  • 书籍

    宋真宗赵恒曾经说过：“书中自有黄金屋，书中自有颜如玉。”

    76 引用 • 389 回帖
  • Access
    1 引用 • 3 回帖 • 4 关注
  • OpenCV
    15 引用 • 36 回帖 • 3 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用 • 11 关注
  • Spark

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

    74 引用 • 46 回帖 • 565 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • JWT

    JWT（JSON Web Token）是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准（RFC 7519），定义了一种简洁的，自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 18 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Follow
    4 引用 • 12 回帖 • 5 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 69 关注
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    325 引用 • 1395 回帖
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 389 关注
  • 音乐

    你听到信仰的声音了么？

    61 引用 • 512 回帖
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    169 引用 • 1527 回帖
  • uTools

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

    7 引用 • 27 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 754 关注
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 175 关注
  • 创造

    你创造的作品可能会帮助到很多人，如果是开源项目的话就更赞了！

    181 引用 • 1005 回帖 • 3 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 6 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台，致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验，及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 1 关注
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 5 关注
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 326 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    167 引用 • 3832 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统，实现一个自托管的 Git 项目仓库，可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题，项目仓库：https://github.com/TCOTC/Whisper

    1 引用 • 28 回帖

最新标签