【分享CSS】临时启用/禁用编辑器页面横向滚动

[hisola (NullPointerException)]

之前写了个插件，为了支持txt的不换行而写了这个CSS，用了两个月自己觉得还不错，尤其是在编辑代码、很多列的表格、嵌套很深的列表时很方便。
现在提取出来分享，抛砖引玉(因为很多样式没适配)。

效果

使用方法

基础使用

1. 添加CSS到自定义代码片段，并启用。【添加CSS教程: 【新手向教程】OB样式调整基础课：CSS入门科普
2. 在需要开启横滚的笔记中添加属性 cssclasses 值: md-horizontal-scroll-enabled

使用 note toolbar 插件 注册命令和快捷键

1. 添加CSS到自定义代码片段，并启用。
2. 在note toolbar中的任意工具栏添加工具栏项目，

   1. 图标、名称、提示任意

   2. 复制 脚本(全局生效) 然后在note toolbar 中注册命令。
      

      

   3. 注册快捷键
      

      

使用 dataview插件 在笔记里添加一个切换按钮

如果没有note toolbar，或不想全局生效，可以使用dataviewjs为当前笔记添加一个单独的开关(只在当前笔记生效);

1. 添加CSS到自定义代码片段，并启用。
2. 直接复制脚本(dvjs)到笔记中即可(需要启用dataviewjs)

CSS

/* 嵌入块 - 水平滚动启用时的内联嵌入样式 */
.md-horizontal-scroll-enabled .internal-embed.markdown-embed.inline-embed.is-loaded{
    /* min-width: 350px;*/
    /* width: max-content;*/
    width: max-content;
}

/* 编辑模式内容容器 - 移除最大宽度限制，启用水平滚动 */
.md-horizontal-scroll-enabled .cm-contentContainer > .cm-content.cm-lineWrapping{
    max-width: none !important;
    width: max-content !important;
    padding-right:75px ;
} 

/* callout 组件宽度随内容撑开 */
/*.md-horizontal-scroll-enabled .cm-embed-block .cm-callout { 
      width: max-content;
}*/

/* 编辑模式行内容 - 防止文本换行 */
.md-horizontal-scroll-enabled .cm-line{
    white-space: pre !important;
}

/* 预览模式 - 启用水平滚动，禁止文本换行 */
.md-horizontal-scroll-enabled .markdown-preview-view
{
    white-space: nowrap !important;
    overflow-x: auto !important;
}

/* 预览模式内容区域 - 宽度自适应，设置最小宽度 */
.md-horizontal-scroll-enabled .markdown-preview-section{
    white-space: nowrap !important;
    width: max-content;
    min-width: var(--file-line-width)
}

/* 编辑模式表格 - 宽度自适应，移除最大宽度限制 */
.md-horizontal-scroll-enabled .markdown-source-view.mod-cm6 table {
    width: auto !important;
    max-width: none !important;
}

/* 预览模式表格容器 - 修复滚动显示问题 */
.md-horizontal-scroll-enabled .markdown-preview-view div[style*="overflow-x: auto"] {
    overflow-x: visible !important;
    width: auto !important;
    max-width: none !important;
}

/* 
 * 编辑模式代码块换行控制
 * 样式1：代码块自动换行，底色随内容宽度变化
 * 样式2：代码块撑开内容容器宽度
 */
.md-horizontal-scroll-enabled .markdown-source-view.mod-cm6 .HyperMD-codeblock{
    /* 样式1 - 启用代码块内文字换行 */
    white-space: pre-wrap !important;
    word-break: break-word !important;

    /* 样式2 - 代码块宽度自适应 */
    max-width: 100% ;
    width: max-content;
    min-width: 100% ;
} 

/* 预览模式表格 - 宽度自适应，确保表格布局 */
.md-horizontal-scroll-enabled .markdown-preview-view table {
    width: auto !important;
    max-width: none !important;
    display: table !important;
}

/* 编辑模式表格单元格 - 禁止内容换行 */
.md-horizontal-scroll-enabled .markdown-source-view.mod-cm6 table td,
.md-horizontal-scroll-enabled .markdown-source-view.mod-cm6 table th {
    white-space: nowrap !important;
}

/* 预览模式表格单元格 - 禁止内容换行 */
.md-horizontal-scroll-enabled .markdown-preview-view table td,
.md-horizontal-scroll-enabled .markdown-preview-view table th {
    white-space: nowrap !important;
}

脚本(全局生效)

    // 初始化状态
    if(!window.mdHorizontalScroll){
        window.mdHorizontalScroll = {enable:false,leafEventRegistered:false}
    }

    // 检查状态 调用函数
    // 切换状态 如果为假或者空
    if(!window.mdHorizontalScroll.enable){
        window.mdHorizontalScroll.enable = true;
        updateLeafClass();
        new Notice("< 开启横向滚动 >")
    }else{
        window.mdHorizontalScroll.enable = false;
        updateLeafClass();
        new Notice("< 关闭横向滚动 >")
    }

    // 如果没有注册事件: 注册一下, 事件主要是用来监视其他标签页的状态, 
    if(!window.mdHorizontalScroll.leafEventRegistered){
        app.workspace.on('active-leaf-change', () => {
            updateLeafClass();
        })
        window.mdHorizontalScroll.leafEventRegistered = true;
        console.log("已注册活动标签页监视事件")
    }

    
    // 切换活动标签页时, 检查window对象下挂载的设置是否为开启; 如果是
    function updateLeafClass(){
        // 准备
        const className = "md-horizontal-scroll-enabled";
        const leaf = app.workspace.getLeaf();
    
        // 状态=开启，且没有class ; 添加
        if(window.mdHorizontalScroll.enable 
            && !leaf.containerEl.classList.contains(className) ){
            leaf.containerEl.addClass(className);
        }else if(!window.mdHorizontalScroll.enable // 没开启, 但有class : 移除
            && leaf.containerEl.classList.contains(className) ){
            leaf.containerEl.removeClass('md-horizontal-scroll-enabled');
        }
        // 同时修改"缩减栏宽"设置的状态
        app.vault.setConfig("readableLineLength", !window.mdHorizontalScroll.enable )
        // console.log(`updateLeafClass, \r\nenable= ${window.mdHorizontalScroll.enable}, \r\nleafEventRegistered=${window.mdHorizontalScroll.leafEventRegistered}`)
    }

脚本(dvjs)

dv.el('button','开关').addEventListener("click",() =>{
    const className = "md-horizontal-scroll-enabled"
    const leaf = app.workspace.getLeaf();
    const mdHorizontalScrollEnabled = leaf.containerEl.classList.contains(className);
    if(mdHorizontalScrollEnabled){
        leaf.containerEl.removeClass(className);
        new Notice("> 关闭横向滚动 <")
    }else{
        leaf.containerEl.addClass(className);
        new Notice("< 开启横向滚动 >")
        // 同时开启/关闭 "缩减栏宽"设置
    }
    // 同时修改"缩减栏宽"设置的状态
    app.vault.setConfig("readableLineLength", !mdHorizontalScrollEnabled)
})