登录 注册

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

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

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

  • 思源笔记

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

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

    25088 引用 • 103414 回帖
  • Q&A

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

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

相关帖子

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
回帖
107
 帖子
12
 积分
567

近期热议

推荐标签 标签

  • Chrome

    Chrome 又称 Google 浏览器，是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖
  • flomo

    flomo 是新一代 「卡片笔记」 ，专注在碎片化时代，促进你的记录，帮你积累更多知识资产。

    6 引用 • 140 回帖
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 828 关注
  • IDEA

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

    181 引用 • 400 回帖
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 1 关注
  • Oracle

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

    107 引用 • 127 回帖 • 345 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 47 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    116 引用 • 54 回帖 • 4 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务，可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 103 关注
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 80 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    66 引用 • 114 回帖 • 196 关注
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 609 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 266 关注
  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    43 引用 • 208 回帖 • 1 关注
  • Love2D

    Love2D 是一个开源的， 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 555 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 786 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘（Capacitive Keyboard）。

    5 引用 • 74 回帖 • 502 关注
  • Solidity

    Solidity 是一种智能合约高级语言，运行在 [以太坊] 虚拟机（EVM）之上。它的语法接近于 JavaScript，是一种面向对象的语言。

    3 引用 • 18 回帖 • 433 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 1 关注
  • 游戏

    沉迷游戏伤身，强撸灰飞烟灭。

    181 引用 • 821 回帖
  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 533 关注
  • 分享

    有什么新发现就分享给大家吧！

    248 引用 • 1794 回帖 • 1 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 54 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的，开放源码的分布式应用程序协调服务，是 Google 的 Chubby 一个开源的实现，是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 4 关注
  • GitLab

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

    46 引用 • 72 回帖
  • Flutter

    Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 3 关注

最新标签