0
# Advanced Features
1

2
Corner handling, context management, and advanced configuration options for complex scroll area implementations.
3

4
## Capabilities
5

6
### ScrollAreaCorner
7

8
Corner element that fills the space when both horizontal and vertical scrollbars are visible.
9

10
```typescript { .api }
11
const ScrollAreaCorner: React.ForwardRefExoticComponent<
12
  ScrollAreaCornerProps & React.RefAttributes<ScrollAreaCornerElement>
13
>;
14

15
interface ScrollAreaCornerProps extends React.ComponentPropsWithoutRef<"div"> {}
16

17
type ScrollAreaCornerElement = React.ComponentRef<"div">;
18
```
19

20
**Usage Examples:**
21

22
```typescript
23
import { ScrollAreaCorner } from "@radix-ui/react-scroll-area";
24

25
// Basic corner (automatically shown when both scrollbars are visible)
26
<ScrollArea>
27
  <ScrollAreaViewport>
28
    <div>Large content requiring both scrollbars</div>
29
  </ScrollAreaViewport>
30
  <ScrollAreaScrollbar orientation="vertical">
31
    <ScrollAreaThumb />
32
  </ScrollAreaScrollbar>
33
  <ScrollAreaScrollbar orientation="horizontal">
34
    <ScrollAreaThumb />
35
  </ScrollAreaScrollbar>
36
  <ScrollAreaCorner />
37
</ScrollArea>
38

39
// Styled corner
40
<ScrollAreaCorner 
41
  style={{ 
42
    backgroundColor: '#f0f0f0',
43
    borderRadius: '2px'
44
  }} 
45
/>
46
```
47

48
### Context Management
49

50
Advanced context system for nested scroll areas and component coordination.
51

52
```typescript { .api }
53
/**
54
 * Creates a scoped context for scroll area components
55
 * Enables multiple scroll areas to coexist without context conflicts
56
 * @returns Scope object for nested scroll area instances
57
 */
58
function createScrollAreaScope(): Scope;
59
```
60

61
**Usage Examples:**
62

63
```typescript
64
import { createScrollAreaScope, ScrollArea } from "@radix-ui/react-scroll-area";
65

66
// Create isolated scope for nested scroll areas
67
const ScrollAreaScope = createScrollAreaScope();
68

69
function NestedScrollAreas() {
70
  return (
71
    <ScrollArea>
72
      <ScrollAreaViewport>
73
        <div>
74
          <p>Outer scroll area content</p>
75
          <ScrollArea __scopeScrollArea={ScrollAreaScope}>
76
            <ScrollAreaViewport __scopeScrollArea={ScrollAreaScope}>
77
              <div>Inner scroll area content</div>
78
            </ScrollAreaViewport>
79
            <ScrollAreaScrollbar __scopeScrollArea={ScrollAreaScope}>
80
              <ScrollAreaThumb __scopeScrollArea={ScrollAreaScope} />
81
            </ScrollAreaScrollbar>
82
          </ScrollArea>
83
        </div>
84
      </ScrollAreaViewport>
85
      <ScrollAreaScrollbar>
86
        <ScrollAreaThumb />
87
      </ScrollAreaScrollbar>
88
    </ScrollArea>
89
  );
90
}
91
```
92

93
### Component Aliases
94

95
Advanced feature aliases for shorter imports.
96

97
```typescript { .api }
98
const Corner: typeof ScrollAreaCorner;
99
```
100

101
**Usage Examples:**
102

103
```typescript
104
import { Corner } from "@radix-ui/react-scroll-area";
105

106
<Corner />
107
```
108

109
## Advanced Configuration
110

111
### Performance Optimization
112

113
The scroll area components include several performance optimizations:
114

115
- **Debounced resize handling**: Prevents excessive recalculations during window resize
116
- **RequestAnimationFrame loops**: Smooth thumb position updates without scroll-linked effects
117
- **Resize Observer integration**: Efficient content size change detection
118
- **Lazy evaluation**: State machines for optimal scrollbar visibility management
119

120
### Browser Compatibility
121

122
- **Cross-browser scrollbar hiding**: Handles `-webkit-scrollbar`, `-ms-overflow-style`, and `scrollbar-width`
123
- **Pointer event normalization**: Consistent behavior across touch and mouse devices
124
- **RTL text direction support**: Proper scrollbar positioning for right-to-left languages
125
- **Focus management**: Maintains accessibility across different browser implementations
126

127
### State Management
128

129
Internal state machine system for complex scrollbar visibility states:
130

131
```typescript
132
// Internal state machine states (not exported)
133
type ScrollbarState = "hidden" | "scrolling" | "interacting" | "idle";
134
```
135

136
States transition based on user interaction:
137
- `hidden` → `scrolling` (on scroll)
138
- `scrolling` → `idle` (on scroll end)  
139
- `idle` → `hidden` (after delay)
140
- `interacting` → `idle` (on pointer leave)
141

142
### CSS Custom Properties
143

144
Advanced CSS custom properties for precise styling control:
145

146
```css
147
.scroll-area {
148
  --radix-scroll-area-corner-width: /* corner width in px */;
149
  --radix-scroll-area-corner-height: /* corner height in px */;
150
  --radix-scroll-area-thumb-width: /* horizontal thumb width in px */;
151
  --radix-scroll-area-thumb-height: /* vertical thumb height in px */;
152
}
153
```
154

155
### Error Handling
156

157
The component gracefully handles edge cases:
158

159
- **Missing viewport references**: Safe null checks prevent runtime errors
160
- **Invalid scroll positions**: Clamping ensures positions stay within valid ranges
161
- **Resize observer errors**: Fallback mechanisms for browsers with limited support
162
- **Event cleanup**: Proper cleanup of timers and event listeners on unmount
163

164
### Accessibility Features
165

166
Advanced accessibility considerations:
167

168
- **Screen reader compatibility**: Native scroll semantics preserved
169
- **Keyboard navigation**: Standard arrow keys, page up/down, home/end support
170
- **Focus indicators**: Custom focus styles don't interfere with accessibility
171
- **Reduced motion**: Respects `prefers-reduced-motion` for smooth scrolling
172
- **High contrast**: Scrollbar visibility maintained in high contrast modes