[Plugin] Sticky Scroll for CodeMirror 6 — VS Code / Monaco-style pinned scope lines

v6
1

Hi everyone! :waving_hand:

I’ve just published a new extension that brings VS Code / Monaco-style sticky scroll to CodeMirror 6:

:package: @fazelstudio/codemirror-stickyscroll

What it does

Sticky lines keep the opening lines of the enclosing scopes (function, class, if/loop, etc.) pinned at the top of the editor as you scroll — exactly like VS Code’s sticky scroll, but built as a pure external extension (no fork of any @codemirror/* package).

Features

  • Per-pixel updates via native scroll + requestAnimationFrame — no jumpy redraws
  • Slide-away effect — the innermost row slides up smoothly as its scope’s closing line approaches the viewport (matches Monaco’s exact behavior)
  • Click-to-jump with scroll margin compensation so the target line is never hidden behind the bar
  • Reuses the consumer’s theme — token colors come from the active highlightingFor() highlighters; the package never registers its own syntaxHighlighting
  • Language-agnostic — works with any @codemirror/lang-* that registers foldNodeProp, with a built-in smart denylist for JS/TS, Python, Rust, Go, and graceful JSON support
  • Gutter alignment — line numbers mirror the real gutter column-by-column via ResizeObserver
  • Dynamic height clamping — the bar never covers more than ~40% of the viewport
  • Zero runtime deps — peer dependencies only

Usage

import { stickyScroll } from "@fazelstudio/codemirror-stickyscroll";

new EditorView({
   extensions: [
     basicSetup,
     javascript(),
     stickyScroll({ maxStickyLines: 4 }),
   ],
   parent: document.body,
 });
──────
Any feedback, bug reports, or suggestions are very welcome! 🙏
1 Like
2

Neat! Thanks for sharing. I’ve added it to the community extension list.