scroll-areas

Guide one-axis scrolling in UI layouts for panels, tables, and modals.

Updated May 24, 2026
One-click install
npx skills add https://github.com/yonetim258852/ozgur-os --skill scroll-areas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scroll-areas
Source: https://github.com/yonetim258852/ozgur-os/tree/main/.claude/skills/scroll-areas
Command: npx skills add https://github.com/yonetim258852/ozgur-os --skill scroll-areas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scroll containers inside a layout — panels, drawers, tables, and modals with inner overflow — create friction. Users must discover that a region scrolls, manage multiple independent scroll positions simultaneously, and context-switch between scroll areas on the same screen.

Core Features & Use Cases

  • Default guidance: advise restructuring so the page handles the overflow instead of internal scrolls where possible.
  • One Axis Only: enforce a single axis for inner scroll when necessary.
  • Always User-Controlled: ensure no auto-scrolling and provide visible scroll affordances.

Quick Start

Identify a layout with potential inner scroll and refactor it to ensure single-axis scrolling.

Frequently Asked Questions about scroll-areas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix inner scroll containers creating friction in my UI layout?▼

Fix inner scroll friction by restructuring the UI layout so the page handles overflow instead of relying on internal scrolls for panels, tables, and modals. This preserves page-level scrolling and eliminates the need to manage multiple independent scroll positions simultaneously.

What is the one-axis scrolling rule for UI panels and modals?▼

The one-axis scrolling rule enforces a single scroll axis when inner overflow is unavoidable. Applying this to panels and modals limits inner overflow and prevents users from context-switching between simultaneous scroll areas on the same screen.

How do I stop unwanted auto-scrolling in data tables and drawers?▼

Stop unwanted auto-scrolling in data tables and drawers by enforcing user-controlled scrolling with explicit visible affordances. This ensures no auto-scrolling occurs and users always discover that a region scrolls and control it manually.

When should I use inner scroll areas instead of page-level scrolling?▼

Use inner scroll areas only when restructuring the layout to handle overflow at the page level is impossible. If inner scroll is necessary, validate the layout against the one-axis rule to limit overflow and preserve page-level scrolling where possible.

What's the best way to handle overflow in complex UI layouts without multiple scrollbars?▼

Handle overflow without multiple scrollbars by refactoring the layout to ensure single-axis scrolling. Guiding the application of one-axis scrolling and validating against the one-axis rule limits inner overflow and preserves page-level scrolling.