登录 注册

【已解决】CSS 代码片段修改：长代码块、嵌入块与表格块添加滚动条

本贴最后更新于 510 天前，其中的信息可能已经时异事殊

想对下面的这个 CSS 代码片段进行修改

该代码片段取自[思源笔记经验分享] 为长代码块、长嵌入块与长表格添加块内滚动条 - 链滴 (ld246.com)，感谢大佬

/* 滚动条轨道样式 */
.protyle-wysiwyg div.code-block[data-node-id]::-webkit-scrollbar-track,
.protyle-wysiwyg [data-node-id][data-type="NodeTable"] table::-webkit-scrollbar-track {
    background-color: var(--b3-border-color);
    border-radius: 8px;
}

/* 为嵌入块与代码块添加纵向滚动条 */
.protyle-wysiwyg [data-node-id][data-type="NodeBlockQueryEmbed"],
.protyle-wysiwyg div.code-block[data-node-id] {
    overflow-y: auto;
    max-height: 50vh;
}

/* 为表格块添加纵向滚动条 */
.protyle-wysiwyg [data-node-id][data-type="NodeTable"] table {
    position: relative;
    overflow-y: auto;
    max-height: 50vh;
}

.protyle-wysiwyg [data-node-id][data-type="NodeTable"] table>thead {
    position: sticky;
    top: 1px;
    outline: 1px solid var(--b3-theme-primary);
    z-index: 1;
}
​

然而在最新版思源 v2.10.13 中，该代码片段会导致代码块出现两个纵向滚动条，其中靠右边的滚动条会使代码块整体框体向下移动，出现大片空白区域。当代码区域已显示最低端、不小心继续向下滚动鼠标滚轮时，就会触发右侧滚动条，出现大片空白

image.png

请问各位大佬，怎么修改上面这段 CSS，可以避免代码块整体框体的向下移动呢？

期待的效果是消除靠右侧的滚动条，并避免整体框体的下移

已尝试直接删除 overflow-y: auto，然而这会导致左侧行号显示异常，溢出到代码块以外

image.png

  • 思源笔记

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

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

    24863 引用 • 102300 回帖 • 1 关注
  • Q&A

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

    9436 引用 • 42977 回帖 • 108 关注
1 引用
教你代码块主题如何在明亮模式下使用暗黑模式下的主题 • jiuwu
1 操作
QMike 在 2023-11-08 11:44:58 更新了该帖
50 悬赏
1 关注
1 收藏
1 引用
1 操作
7 回帖
4
2
711 133 9 433 5 3 126

相关帖子

7 回帖
【已解决】CSS 代码片段修改：长代码块、嵌入块与表格块添加滚动条

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • QMike • • 1 赞同
    订阅者 付费者 捐赠者 作者

    顶一下，呜呜呜

  • Yylicon •
    付费者

    我自己对着这个改过，感觉还好
    任意块通过自定义属性 src:1 添加滚动条

    .protyle-wysiwyg [data-node-id][custom-scr="1"] {
    overflow-y: auto;
    max-height: 50vh;
}
​
    1 回复
  • QMike •
    订阅者 付费者 捐赠者 作者

    好像不太行，一方面这需要手动加上自定义属性 scr: 1，不太方便；另外实测还是会出现两个纵向滚动条、并有一样的空白区域 😂

    1 回复
  • Yylicon •
    付费者

    好像还真是，我的也寄了，应该和这个版本 2.10.13 有关系

  • QMike • • 1
    订阅者 付费者 捐赠者 作者

    经群里面 Roy 佬的指点，在代码片段中添加如下代码便可正常显示

    .protyle-linenumber, .protyle-linenumber__rows{
	height:100%;
}
​

    再次感谢佬~

  • JeffreyChen • • 1
    付费者 支持者 捐赠者

    嵌入块和代码块的 CSS 选择器还要再加一点东西，不然右上角的按钮和书签会被遮住

    image.png

    image.png

    /* 为嵌入块与代码块添加纵向滚动条 */
.protyle-wysiwyg [data-node-id][data-type="NodeBlockQueryEmbed"] .protyle-wysiwyg__embed ,
.protyle-wysiwyg div.code-block[data-node-id] .hljs
​
    1 回复
  • QMike •
    订阅者 付费者 捐赠者 作者

    谢谢佬的提醒，的确存在这个问题

    不过测试了一下，将嵌入块和代码块的 CSS 选择器修改为这个形式后，会导致两个问题：

    • 嵌入块、代码块框体再次出现整体下移和大片空白的情况（即使加上了修正代码）
    • 代码整体略微上移，不能与行号对齐

    PixPin20240327102104.png

    现在一种解决方法是加入如下 CSS 代码片段以正常显示代码块、嵌入块的命名、别名等

    
/*代码块折叠状态下，属性（命名、别名）位置*/
.protyle-wysiwyg [data-node-id][fold="1"]:not(.li):not([data-type="NodeHeading"]) .protyle-attr {
    opacity: 1;
    font-weight: bold;
    transform: translate(-80px,130%);
}
/*代码块展开状态下，属性（命名、别名）位置*/
.code-block > .protyle-attr {
    transform: translate(-80px,130%);
}

/*嵌入块展开状态下，属性（命名、别名）位置*/
.protyle-wysiwyg [data-node-id][data-type="NodeBlockQueryEmbed"] .protyle-attr {
    transform: translate(-80px,130%);
}
​

    效果如下：

    image.png

    不过右上角三个按钮的悬浮提示依然无法正常显示

    1 操作
    QMike 在 2024-03-27 11:27:29 更新了该回帖
请输入回帖内容 ...
QMike
回帖
103
 帖子
12
 积分
384

近期热议

推荐标签 标签

  • 正则表达式

    正则表达式（Regular Expression）使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • TensorFlow

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

    20 引用 • 19 回帖 • 2 关注
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 169 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖 • 3 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 678 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖 • 4 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 735 关注
  • 创造

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

    183 引用 • 1011 回帖 • 2 关注
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖
  • Scala

    Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 159 关注
  • CAP

    CAP 指的是在一个分布式系统中， Consistency（一致性）、 Availability（可用性）、Partition tolerance（分区容错性），三者不可兼得。

    12 引用 • 5 回帖 • 638 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言，应用广泛。C++ 支持多种编程范式，面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • GitHub

    GitHub 于 2008 年上线，目前，除了 Git 代码仓库托管及基本的 Web 管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。正因为这些功能所提供的便利，又经过长期的积累，GitHub 的用户活跃度很高，在开源世界里享有深远的声望，并形成了社交化编程文化（Social Coding）。

    210 引用 • 2040 回帖
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 543 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 250 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 5 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构，这是有关软件整体结构与组件的抽象描述，用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    143 引用 • 442 回帖
  • OpenCV
    15 引用 • 36 回帖 • 1 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 442 关注
  • 印象笔记
    3 引用 • 16 回帖
  • 招聘

    哪里都缺人，哪里都不缺人。

    189 引用 • 1057 回帖
  • Rust

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

    58 引用 • 22 回帖
  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    88 引用 • 139 回帖
  • 叶归
    5 引用 • 16 回帖 • 11 关注
  • Mobi.css

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

    1 引用 • 6 回帖 • 755 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx，非正式缩写为 FF），是一个开源的网页浏览器，使用 Gecko 排版引擎，支持多种操作系统，如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 391 关注

最新标签