Skip to content

feat: improve scrollbar UX with auto-hide and interactive controls #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sreya merged 1 commit into from
Nov 17, 2025
Merged

feat: improve scrollbar UX with auto-hide and interactive controls #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 76 additions & 0 deletions demo/scrollbar-test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Scrollbar Test - Ghostty WASM</title>
<style>
body {
margin: 0;
padding: 20px;
background: #1e1e1e;
color: white;
font-family: monospace;
}
#terminal {
width: 800px;
height: 600px;
margin: 20px auto;
}
.info {
max-width: 800px;
margin: 0 auto 20px;
padding: 10px;
background: #2d2d2d;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="info">
<h2>Scrollbar Test</h2>
<p>✅ Blue banner removed</p>
<p>🖱️ Try clicking the scrollbar track or dragging the thumb</p>
<p>🔄 Use mouse wheel to scroll and see the scrollbar</p>
</div>
<div id="terminal"></div>

<script type="module">
import { Terminal } from '../lib/terminal.ts';
import { FitAddon } from '../lib/addons/fit.ts';

const term = new Terminal({
fontSize: 14,
fontFamily: 'Monaco, Menlo, monospace',
scrollback: 5000,
});

const fitAddon = new FitAddon();
term.loadAddon(fitAddon);

await term.open(document.getElementById('terminal'));
fitAddon.fit();

// Write lots of lines to create scrollback
term.write('\\x1b[1;32m=== Scrollbar Test ===\\x1b[0m\\r\\n\\r\\n');
term.write('Generating 200 lines of content...\\r\\n\\r\\n');

for (let i = 1; i <= 200; i++) {
const color = 31 + (i % 7);
term.write(
`\\x1b[${color}mLine ${i}: This is test content for scrolling. The quick brown fox jumps over the lazy dog.\\x1b[0m\\r\\n`
);
}

term.write('\\r\\n\\x1b[1;33m✅ Done! Now try:\\x1b[0m\\r\\n');
term.write(' • Scroll up with mouse wheel\\r\\n');
term.write(' • Click on the scrollbar track to jump\\r\\n');
term.write(' • Drag the scrollbar thumb\\r\\n');
term.write(' • Notice: NO blue banner! 🎉\\r\\n');

// Handle window resize
window.addEventListener('resize', () => {
fitAddon.fit();
});
</script>
</body>
</html>
54 changes: 20 additions & 34 deletions lib/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,8 @@ export class CanvasRenderer {
buffer: IRenderable,
forceAll: boolean = false,
viewportY: number = 0,
scrollbackProvider?: IScrollbackProvider
scrollbackProvider?: IScrollbackProvider,
scrollbarOpacity: number = 1
): void {
const cursor = buffer.getCursor();
const dims = buffer.getDimensions();
Expand Down Expand Up @@ -410,9 +411,9 @@ export class CanvasRenderer {
this.renderCursor(cursor.x, cursor.y);
}

// Render scrollbar if scrolled or scrollback exists
if (scrollbackProvider) {
this.renderScrollbar(viewportY, scrollbackLength, dims.rows);
// Render scrollbar if scrolled or scrollback exists (with opacity for fade effect)
if (scrollbackProvider && scrollbarOpacity > 0) {
this.renderScrollbar(viewportY, scrollbackLength, dims.rows, scrollbarOpacity);
}

// Update last cursor position
Expand Down Expand Up @@ -667,9 +668,17 @@ export class CanvasRenderer {

/**
* Render scrollbar (Phase 2)
* Shows scroll position and allows click/drag interaction
* @param opacity Opacity level (0-1) for fade in/out effect
*/
private renderScrollbar(viewportY: number, scrollbackLength: number, visibleRows: number): void {
if (scrollbackLength === 0) return;
private renderScrollbar(
viewportY: number,
scrollbackLength: number,
visibleRows: number,
opacity: number = 1
): void {
// Don't render if fully transparent or no scrollback
if (opacity <= 0 || scrollbackLength === 0) return;

const ctx = this.ctx;
const canvasHeight = this.canvas.height / this.devicePixelRatio;
Expand All @@ -689,38 +698,15 @@ export class CanvasRenderer {
const scrollPosition = viewportY / scrollbackLength; // 0 to 1
const thumbY = scrollbarPadding + (scrollbarTrackHeight - thumbHeight) * (1 - scrollPosition);

// Draw scrollbar track (subtle background)
ctx.fillStyle = 'rgba(128, 128, 128, 0.1)';
// Draw scrollbar track (subtle background) with opacity
ctx.fillStyle = `rgba(128, 128, 128, ${0.1 * opacity})`;
ctx.fillRect(scrollbarX, scrollbarPadding, scrollbarWidth, scrollbarTrackHeight);

// Draw scrollbar thumb
// Draw scrollbar thumb with opacity
const isScrolled = viewportY > 0;
ctx.fillStyle = isScrolled ? 'rgba(128, 128, 128, 0.5)' : 'rgba(128, 128, 128, 0.3)';
const baseOpacity = isScrolled ? 0.5 : 0.3;
ctx.fillStyle = `rgba(128, 128, 128, ${baseOpacity * opacity})`;
ctx.fillRect(scrollbarX, thumbY, scrollbarWidth, thumbHeight);

// Draw "scrolled up" indicator if not at bottom
if (isScrolled) {
// Draw a banner at the top showing scroll position
const bannerHeight = 24;
const bannerY = 0;

// Semi-transparent background
ctx.fillStyle = 'rgba(33, 150, 243, 0.9)';
ctx.fillRect(0, bannerY, canvasWidth, bannerHeight);

// Text showing position
ctx.fillStyle = '#ffffff';
ctx.font = '12px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

const linesFromBottom = viewportY;
const text = `↑ Scrolled ${linesFromBottom} lines from bottom (${scrollbackLength} total) - Scroll down or type to return`;
ctx.fillText(text, canvasWidth / 2, bannerY + bannerHeight / 2);

ctx.textAlign = 'left';
ctx.textBaseline = 'alphabetic';
}
}
public getMetrics(): FontMetrics {
return { ...this.metrics };
Expand Down
Loading