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

简介

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

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

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

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

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

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

演示

使用

若不使用 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;
}