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

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

想对下面的这个 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

  • 思源笔记

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

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

    26108 引用 • 108392 回帖
  • Q&A

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

    10034 引用 • 45600 回帖 • 70 关注
1 操作
QMike 在 2023-11-08 11:44:58 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • QMike 1 赞同

    顶一下,呜呜呜

  • Yylicon

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

    .protyle-wysiwyg [data-node-id][custom-scr="1"] { overflow-y: auto; max-height: 50vh; }
    1 回复
  • 好像不太行,一方面这需要手动加上自定义属性 scr: 1,不太方便;另外实测还是会出现两个纵向滚动条、并有一样的空白区域 😂

    1 回复
  • Yylicon

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

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

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

    再次感谢佬~

  • 嵌入块和代码块的 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 回复
  • 谢谢佬的提醒,的确存在这个问题

    不过测试了一下,将嵌入块和代码块的 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 更新了该回帖
请输入回帖内容 ...

推荐标签 标签

  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    954 引用 • 944 回帖
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 544 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 675 关注
  • 星云链

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

    3 引用 • 16 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 181 关注
  • GitHub

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

    209 引用 • 2040 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 189 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • 面试

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

    326 引用 • 1395 回帖
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    17 引用 • 7 回帖
  • GitLab

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

    46 引用 • 72 回帖 • 1 关注
  • 招聘

    哪里都缺人,哪里都不缺人。

    188 引用 • 1057 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖
  • 架构

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

    142 引用 • 442 回帖
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 405 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    438 引用 • 1238 回帖 • 590 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3455 回帖 • 151 关注
  • Excel
    31 引用 • 28 回帖
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖
  • WebComponents

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

    1 引用 • 10 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    43 引用 • 44 回帖
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 1 关注
  • uTools

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

    7 引用 • 28 回帖 • 2 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 4 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    98 引用 • 903 回帖