Is the scrollbar performance-optimized?

While highly performant for most UIs, it is recommended to use virtualization for extremely large lists with thousands of items to maintain optimal frame rates.

How does the negative margin technique work?

It hides the native scrollbar by pushing it outside an overflow-hidden wrapper using a negative right margin, then renders a custom DOM element as a visual replacement.

Does this skill support interactive scrolling?

Yes, the provided OverlayScrollbar component supports clicking and dragging the thumb, clicking the track to jump, and mouse wheel/trackpad scrolling.

Why doesn't standard CSS styling work for scrollbars in WKWebView?

On macOS, WKWebView ignores ::-webkit-scrollbar pseudo-elements and standard properties like scrollbar-width, forcing the native system appearance regardless of CSS.

Custom macOS WKWebView Scrollbars

Name: Custom macOS WKWebView Scrollbars
Author: firstloophq

byfirstloophq

•

디자인 도구

Implements customizable, theme-aware scrollbars for native macOS WKWebView applications using the negative margin layout technique.

This skill provides a specialized solution for developers building macOS applications with WKWebView, specifically addressing the platform's limitation where standard CSS scrollbar pseudo-elements and properties are ignored. By utilizing a sophisticated negative margin layout strategy and a React-based overlay component, it enables the creation of consistent, themeable, and highly interactive scrollbars that match your application's design system. It includes advanced features like auto-hiding, hover-to-show triggers, and drag-and-drop support, ensuring a polished and professional user interface across both web and native macOS environments.

주요 기능

019 GitHub stars

02Intelligent auto-hide functionality that fades after inactivity

03Bypasses WKWebView restrictions on native CSS scrollbar styling

04Theme-aware integration using custom theme styles and borders

05Interactive drag support and track-click positioning

06Resize-aware updates for dynamic content and container changes

사용 사례

01Styling scrollbars in native macOS apps using WKWebView

02Implementing custom-branded scroll containers for design systems

03Fixing scrollbar visibility and theming issues in desktop wrappers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add firstloophq/nomendex macos-scrollbar

For use in Claude.ai and ChatGPT

Download Skill