A VS Code extension that makes PageUp/PageDown keys work like classic text editors, where the cursor stays at the same relative position on the screen when scrolling.
By default, VS Code's PageUp/PageDown behavior moves the cursor to the top or bottom of the viewport after scrolling. This extension restores the classic behavior found in editors like Vim, Emacs, and traditional text editors, where the cursor maintains its relative position on the screen (e.g., if it was 5 lines from the top, it stays 5 lines from the top after paging).
- Classic Scrolling Behavior: When you press PageUp or PageDown, the viewport scrolls but the cursor maintains its relative position on the screen (measured in lines from the top of the viewport)
- Smart Navigation: Scrolls by
viewportHeight - 2lines for natural page-by-page navigation with slight overlap - Automatic Keybinding: Automatically binds to PageUp/PageDown keys when the extension is active
- Edge Case Handling: Gracefully handles cases where you're already at the top or bottom of the document
- Dynamic Viewport Support: Adapts to viewport height changes during scrolling
- Download the
classic-paging-1.0.0.vsixfile - Open VS Code
- Open the Command Palette (
Cmd+Shift+P/Ctrl+Shift+P) - Run "Extensions: Install from VSIX..."
- Select the
.vsixfile
-
Clone or download this repository:
git clone https://github.com/sergev/vscode-classic-paging.git cd vscode-classic-paging -
Install dependencies:
npm install
-
Compile the extension:
npm run compile
-
Press
F5in VS Code to open a new Extension Development Host window, or:- Open the Command Palette (
Cmd+Shift+P/Ctrl+Shift+P) - Run "Extensions: Install from VSIX..." if you've packaged it
- Or use "Developer: Install Extension from Location..." and select this directory
- Open the Command Palette (
Once installed, the extension automatically activates and binds to the PageUp and PageDown keys. Simply use these keys as you normally would in any text editor - the cursor will maintain its relative position on the screen while the viewport scrolls.
The extension provides two commands that can also be invoked from the Command Palette:
- Page Up (Classic): Scrolls up while maintaining cursor position
- Page Down (Classic): Scrolls down while maintaining cursor position
To develop and test the extension:
- Open the extension folder in VS Code
- Press
F5to launch a new Extension Development Host window - Test PageUp/PageDown in the new window
- Make changes to
src/extension.ts - Press
Ctrl+R(orCmd+Ron Mac) in the Extension Development Host to reload
To build the extension:
npm run compileTo watch for changes during development:
npm run watchThe extension implements classic paging behavior through the following steps:
- Calculate Relative Position: Determines how many lines the cursor is from the top of the visible viewport
- Scroll Viewport: Scrolls the viewport by
viewportHeight - 2lines in the requested direction (up or down) - Maintain Cursor Position: After scrolling, repositions the cursor to maintain the same relative position (same number of lines from the top)
The implementation uses VS Code's revealRange API to control viewport scrolling and handles dynamic viewport height changes that can occur during the scroll operation.
The extension automatically activates on startup and binds to PageUp/PageDown keys. No configuration is required.
If you want to customize the scroll amount, you can modify the scrollAmount calculation in src/extension.ts (currently set to viewportHeight - 2 lines).
- VS Code version 1.80.0 or higher
MIT