VSCode文档滚动时顶部scroll-decoration装饰线自定义配置方法

对应配置项 #

开发VSCode颜色主题时遇到的、文档未滚动到顶部时显示的编辑器标签页下方高亮横线，对应的官方workbench颜色配置项为scrollbar.shadow，不需要修改源码提交PR，直接在主题配置中设置该颜色为完全透明即可移除该效果：

// 主题配置文件中的colors字段
"colors": {
  "scrollbar.shadow": "#00000000"
}

普通用户如果想在本地编辑器移除该横线，直接在用户设置的workbench.colorCustomizations字段中添加上述配置即可生效，无需安装第三方插件。

滚动边缘模糊效果关闭方式 #

VSCode目前没有提供独立的开关项专门控制滚动边缘的模糊阴影效果，上述将scrollbar.shadow设为透明的配置，会同时移除编辑器滚动时在顶部、侧边、底部出现的所有滚动阴影装饰，直接达到关闭边缘模糊效果的目的。

效果对比 #

文档位于文件顶部状态 #

文档滚动至最顶部时，.scroll-decoration类不会被添加到编辑器DOM节点上，横线不可见。

文档向下滚动状态 #

文档向下滚动离开顶部位置后，该元素自动渲染，默认配置下会显示一条浅灰色内阴影横线。

元素默认样式 #

通过DevTools定位到的该装饰元素默认CSS样式如下：

.monaco-editor .scroll-decoration {
     box-shadow: #dddddd 0 6px 6px -6px inset; 
}

.monaco-editor .scroll-decoration {
    position: absolute;
    top: 0;
    left: 0;
    height: 6px;
}

配置scrollbar.shadow为透明的本质是覆盖上述box-shadow的颜色值，相比注入自定义CSS、修改源码的方式，使用官方配置项实现兼容性更好，版本更新后不会失效。

内容的提问来源于stack exchange，提问作者ultraGentle