[思源笔记经验分享] 为长代码块、长嵌入块与长表格添加块内滚动条

本贴最后更新于 961 天前,其中的信息可能已经斗转星移

简介

主题 Dark+v0.5.1 中又更新了一个自定义块属性:

  • 属性名: render
  • 属性值: scroll

该自定义块属性在当前块的高度大于屏幕的 50% 以上时, 将会将该块的高度锁定为 50vh 并为其添加一个纵向的滚动条

  • 这在长代码块, 长嵌入块与长表格中十分实用
  • 长表格中使用滚动条时还会固定表格头所在行, 以方便在使用滚动条时查看

注: 可以配合使用快捷键 Shift + Alt + T 开启的打字机模式, 详情请参考: [思源笔记经验分享] 打字机模式

如果需要订阅服务, 欢迎使用我的推荐码呀: h0sc9rc (*^▽^*)

演示

思源笔记功能示范 07.gif

思源笔记功能示范 06.gif

使用

若不使用 Dark+ 主题, 可以选择所想应用的 CSS 片段添加到当前所使用主题目录下的 theme.css 文件末尾

仅为设置自定义块属性 render: scroll 的块添加滚动条

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

/* 为指定块添加纵向滚动条 */
.protyle-wysiwyg [data-node-id][custom-render~=scroll]:not([data-type="NodeTable"]) {
    overflow-y: auto;
    max-height: 50vh;
}

.protyle-wysiwyg [data-node-id][custom-render~=scroll][data-type="NodeTable"] table {
    position: relative;
    overflow-y: auto;
    max-height: 50vh;
}

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

为所有的代码块, 嵌入块与表格块添加滚动条

/* 滚动条轨道样式 */
.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;
}

为设置自定义块属性 render: scroll 的文档块中所有代码块, 嵌入块与表格块设置滚动条

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

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

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

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

  • 思源笔记

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

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

    22023 引用 • 87833 回帖 • 3 关注
1 操作
shuoying 在 2022-03-20 12:49:58 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • CuiHS

    想问一下,目前我使用了 paperX 主题,使用您这个 css 后,表格确实固定了表头,而且只占 50% 高度,但没有横向与纵向滚动条,请问这个是需要改动原主题的哪个地方呢?

    我用的是第二个片断:为所有的代码块、嵌入块和与表格块添加滚动条。

    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
    
  • 查看全部回帖