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

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

简介

主题 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;
}

  • 思源笔记

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

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

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

相关帖子

欢迎来到这里!

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

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

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

    1 回复
  • 需要更改 paperX 主题的如下片段, 该片段的功能将滚动条都设置为了完全透明

    ::-webkit-scrollbar-thumb {
      /*滚动条*/
      background-color: rgba(24, 23, 23, 0);
    }
    
    /* 更改为 */
    
    ::-webkit-scrollbar-thumb {
      /* 滚动条颜色 */
      background-color: rgba(24, 23, 23, 0.25);
      /* 移除滚动条背景图片 */
      background-image: none;
    }
    
    1 回复
  • CuiHS 1 评论

    谢谢,解决了。

    再问个问题:还是 paperX 主题,目前鼠标移到表格题头,背景色会变透明,显示出压在下面的行内容,这个应该是 hover 的设置吧,但我找了一下,paperX 里面好像没啥 hover 设置。

    可能是因为 paperX 更改了主题颜色 --b3-theme-primary, 换成了一个有透明度的颜色
    shuoying 1
  • CuiHS 7 评论

    @shuoying 你好,新 2.0.16 版使用这个代码不会出现滚动条了,不知道怎么回事。我用的是 ConciseLight 主题。是否能看一下,谢谢。

    请问具体是哪一个片段呀 ❓
    shuoying
    @shuoying 我用的是 为所有的代码块, 嵌入块与表格块添加滚动条 这个;以前用得没问题,顶多是边框有点问题,不过可以滚动,但现在就不行了。如果你在 2.0.16 版本没问题,那估计是主题问题。
    CuiHS
    @CuiHS 我这里貌似能正常起作用
    shuoying
    @shuoying 用的主题是默认的?
    CuiHS
    @CuiHS 默认的也没问题
    shuoying
    @shuoying 搞定了,我把这个主题里面关于表格、边线的部分删得七七八八然后就能用了。发现思源主题的 CSS 里面用/* */注释好像不起作用(中文没问题,但带有 css 符号的注释后依然有用)
    CuiHS
    @CuiHS 应该不是注释的问题, 可能是哪里不小心注释语法不合法导致整个 CSS 文件无效了吧
    shuoying
  • 这东西有大用,感谢!突然发现思源功能这么强大

  • 嵌入块和代码块的 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
    
请输入回帖内容 ...