Features

1. Visual Styling

Track

• Background + hover background
• Border, border radius
• Box shadow
• Opacity
• Margin & padding

Thumb

• Background (normal, hover, active)
• Border & radius
• Box shadow (normal + hover)
• Opacity
• Margin

2. Dimensions

• Scrollbar width & height (vertical + horizontal)
• Minimum thumb size for usability on long scroll areas

3. Behavior & UX

• Transition duration + timing function (ease, linear, ease-in-out, cubic-bezier)
• Auto-hide with configurable delay (ms)
• Smooth or auto scroll behavior
• Cursor style (pointer, grab, default)
• Z-index control

4. General Characteristics

• Live preview in demo for instant visual feedback
• Performance optimized (GPU-friendly animations)
• Responsive across desktop/tablet/mobile
• Accessibility: keyboard navigation, focus handling, reduced-motion support

How to Use in OutSystems

1. Add to your module

• Install from the Forge into your application
• Reference the public Block (e.g., AdvancedCustomScrollbar) and any CSS/JS resources

2. Configure Styling Inputs

Use design tokens or literal values:

• Width/Height: 12px, 8px
• Colors: CSS, rgba(), or gradients such as:
  linear-gradient(135deg, #667eea 0%, #764ba2 100%)

Use the demo presets as reference starting points.

3. Configure Behavior Inputs

Common setup:

• Auto-hide enabled with a delay (e.g., 1500ms)
• Scroll behavior: smooth
• Transition duration: 0.3s

Input Parameters (Suggested Mapping)

Dimensions

• ScrollbarWidth: text
• ScrollbarHeight: text
• ThumbMinHeight: text
• ThumbMinWidth: text

Track Styling

• TrackBackground
• TrackBackgroundHover
• TrackBorderRadius
• TrackBorder
• TrackBoxShadow
• TrackOpacity (0–1)
• TrackOpacityHover (0–1)
• TrackMargin
• TrackPadding

Thumb Styling

• ThumbBackground
• ThumbBackgroundHover
• ThumbBackgroundActive
• ThumbBorderRadius
• ThumbBorder
• ThumbBorderHover
• ThumbBoxShadow
• ThumbBoxShadowHover
• ThumbOpacity (0–1)
• ThumbOpacityHover (0–1)
• ThumbMargin

Behavior

• TransitionDuration (0.3s)
• TransitionTiming (ease, linear, ease-in-out, or cubic-bezier)
• AutoHide (boolean)
• AutoHideDelayMs (integer)
• ScrollBehavior (smooth or auto)
• Cursor (pointer, grab, default)
• ZIndex (integer/text)
• BackdropFilter (e.g., blur(10px) or blur(5px) saturate(150%))