想对下面的这个 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 中,该代码片段会导致代码块出现两个纵向滚动条,其中靠右边的滚动条会使代码块整体框体向下移动,出现大片空白区域。当代码区域已显示最低端、不小心继续向下滚动鼠标滚轮时,就会触发右侧滚动条,出现大片空白
请问各位大佬,怎么修改上面这段 CSS,可以避免代码块整体框体的向下移动呢?
期待的效果是消除靠右侧的滚动条,并避免整体框体的下移
已尝试直接删除
overflow-y: auto
,然而这会导致左侧行号显示异常,溢出到代码块以外
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于