ScrollBar

A ScrollBar lets users scroll content that overflows its container. At rest it shows a thin thumb over the content; on hover it expands into a track with arrows.

Paragraph 1. Hover the scroll bar to expand it.

Paragraph 2. Hover the scroll bar to expand it.

Paragraph 3. Hover the scroll bar to expand it.

Paragraph 4. Hover the scroll bar to expand it.

Paragraph 5. Hover the scroll bar to expand it.

Paragraph 6. Hover the scroll bar to expand it.

Paragraph 7. Hover the scroll bar to expand it.

Paragraph 8. Hover the scroll bar to expand it.

Usage

<script>
  import { ScrollBar } from 'fluentui-svelte';
</script>

<ScrollBar style="height: 12rem;" viewportAttributes={{ 'aria-label': 'Article' }}>
  <!-- Long content -->
</ScrollBar>

Overflow

overflow sets the axes that scroll: auto (the default, only the axes that overflow), y, x or both.

View Code

<script>
  import { ScrollBar } from 'fluentui-svelte';
</script>

<ScrollBar overflow="y" style="height: 12rem;" viewportAttributes={{ 'aria-label': 'Article' }}>…</ScrollBar>
<ScrollBar overflow="x" style="height: 12rem;" viewportAttributes={{ 'aria-label': 'Tiles' }}>…</ScrollBar>
<ScrollBar overflow="both" style="height: 12rem;" viewportAttributes={{ 'aria-label': 'Grid' }}>…</ScrollBar>

Paragraph 1. Hover the scroll bar to expand it.

Paragraph 2. Hover the scroll bar to expand it.

Paragraph 3. Hover the scroll bar to expand it.

Paragraph 4. Hover the scroll bar to expand it.

Paragraph 5. Hover the scroll bar to expand it.

Paragraph 6. Hover the scroll bar to expand it.

Paragraph 7. Hover the scroll bar to expand it.

Paragraph 8. Hover the scroll bar to expand it.

overflow="y"

overflow="x"

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

overflow="both"

Expanded

Keeps the track, thumb and arrows visible.

View Code

<script>
  import { ScrollBar } from 'fluentui-svelte';
</script>

<ScrollBar expanded overflow="both" style="width: 20rem; height: 12rem;">
  …
</ScrollBar>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

Size

size sets the expanded scroll bar to thin, medium (default) or large.

View Code

<script>
  import { ScrollBar } from 'fluentui-svelte';
</script>

<ScrollBar size="thin" expanded style="height: 12rem;">…</ScrollBar>
<ScrollBar size="medium" expanded style="height: 12rem;">…</ScrollBar>
<ScrollBar size="large" expanded style="height: 12rem;">…</ScrollBar>

Paragraph 1. Hover the scroll bar to expand it.

Paragraph 2. Hover the scroll bar to expand it.

Paragraph 3. Hover the scroll bar to expand it.

Paragraph 4. Hover the scroll bar to expand it.

Paragraph 5. Hover the scroll bar to expand it.

Paragraph 6. Hover the scroll bar to expand it.

Paragraph 7. Hover the scroll bar to expand it.

Paragraph 8. Hover the scroll bar to expand it.

thin

Paragraph 1. Hover the scroll bar to expand it.

Paragraph 2. Hover the scroll bar to expand it.

Paragraph 3. Hover the scroll bar to expand it.

Paragraph 4. Hover the scroll bar to expand it.

Paragraph 5. Hover the scroll bar to expand it.

Paragraph 6. Hover the scroll bar to expand it.

Paragraph 7. Hover the scroll bar to expand it.

Paragraph 8. Hover the scroll bar to expand it.

medium

Paragraph 1. Hover the scroll bar to expand it.

Paragraph 2. Hover the scroll bar to expand it.

Paragraph 3. Hover the scroll bar to expand it.

Paragraph 4. Hover the scroll bar to expand it.

Paragraph 5. Hover the scroll bar to expand it.

Paragraph 6. Hover the scroll bar to expand it.

Paragraph 7. Hover the scroll bar to expand it.

Paragraph 8. Hover the scroll bar to expand it.

large

Existing element

Adds the scroll bars to an existing element instead of rendering one.

View Code

<script>
  import { ScrollBar } from 'fluentui-svelte';
  let target = $state(null);
</script>

<ul bind:this={target} style="width: 20rem; height: 12rem;">
  <li>…</li>
</ul>
<ScrollBar scrollRef={target} viewportAttributes={{ 'aria-label': 'Items' }} />

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

Auto-hide

Controls when the scroll bar hides.

View Code

<script>
  import { ScrollBar } from 'fluentui-svelte';
</script>

<ScrollBar autoHide="never" style="height: 8rem;">…</ScrollBar>
<ScrollBar autoHide="scroll" style="height: 8rem;">…</ScrollBar>
<ScrollBar autoHide="leave" style="height: 8rem;">…</ScrollBar>
<ScrollBar autoHide="move" style="height: 8rem;">…</ScrollBar>

Paragraph 1. Hover the scroll bar to expand it.

Paragraph 2. Hover the scroll bar to expand it.

Paragraph 3. Hover the scroll bar to expand it.

Paragraph 4. Hover the scroll bar to expand it.

never

Paragraph 1. Hover the scroll bar to expand it.

Paragraph 2. Hover the scroll bar to expand it.

Paragraph 3. Hover the scroll bar to expand it.

Paragraph 4. Hover the scroll bar to expand it.

scroll

Paragraph 1. Hover the scroll bar to expand it.

Paragraph 2. Hover the scroll bar to expand it.

Paragraph 3. Hover the scroll bar to expand it.

Paragraph 4. Hover the scroll bar to expand it.

leave

Paragraph 1. Hover the scroll bar to expand it.

Paragraph 2. Hover the scroll bar to expand it.

Paragraph 3. Hover the scroll bar to expand it.

Paragraph 4. Hover the scroll bar to expand it.

move

Arrows

Hides the arrow buttons.

View Code

<script>
  import { ScrollBar } from 'fluentui-svelte';
</script>

<ScrollBar hideArrows style="width: 20rem; height: 12rem;">
  <p>…</p>
</ScrollBar>

Paragraph 1. Hover the scroll bar to expand it.

Paragraph 2. Hover the scroll bar to expand it.

Paragraph 3. Hover the scroll bar to expand it.

Paragraph 4. Hover the scroll bar to expand it.

Paragraph 5. Hover the scroll bar to expand it.

Paragraph 6. Hover the scroll bar to expand it.

Paragraph 7. Hover the scroll bar to expand it.

Paragraph 8. Hover the scroll bar to expand it.

Hidden track

Hides the track when the scroll bar expands.

View Code

<script>
  import { ScrollBar } from 'fluentui-svelte';
</script>

<ScrollBar hideTrack style="width: 20rem; height: 12rem;">
  <p>…</p>
</ScrollBar>

Paragraph 1. Hover the scroll bar to expand it.

Paragraph 2. Hover the scroll bar to expand it.

Paragraph 3. Hover the scroll bar to expand it.

Paragraph 4. Hover the scroll bar to expand it.

Paragraph 5. Hover the scroll bar to expand it.

Paragraph 6. Hover the scroll bar to expand it.

Paragraph 7. Hover the scroll bar to expand it.

Paragraph 8. Hover the scroll bar to expand it.

Keyboard and accessibility

The scrolling area is focusable and scrolls with the keyboard. Name it with viewportAttributes.

Component Props

Name	Type	Default	Description
`as`	`'div'` \| `'section'` \| `'article'` \| `'aside'` \| `'main'` \| `'nav'` \| `'ul'` \| `'ol'`	`'div'`	The element to render.
`ref` bindable	`HTMLElement`		The root element.
`scrollRef`	`HTMLElement` \| `null`		An existing element to add the scroll bars to instead of rendering one.
`viewportRef` bindable	`HTMLElement` \| `null`		The element that scrolls.
`viewportAttributes`	`HTMLAttributes<HTMLDivElement>`		Attributes for the element that scrolls.
`expanded`	`boolean`		Keeps the scroll bar expanded.
`collapseDelay`	`number`	`2000`	Milliseconds to wait before collapsing after the pointer leaves.
`instance` bindable	`OverlayScrollbars` \| `null`		The OverlayScrollbars instance.
`overflow`	`'auto'` \| `'x'` \| `'y'` \| `'both'`	`'auto'`	The axes that can scroll.
`autoHide`	`'never'` \| `'scroll'` \| `'leave'` \| `'move'`	`'move'`	When the scroll bar hides.
`autoHideDelay`	`number`	`1000`	Milliseconds to wait before hiding.
`hideArrows`	`boolean`		Hides the arrow buttons.
`showFocusOutline`	`boolean`		Shows the focus outline of the scrolling area.
`hideTrack`	`boolean`		Hides the track.
`size`	`'thin'` \| `'medium'` \| `'large'`	`'medium'`	The size of the expanded scroll bar.
`arrowStep`	`number`	`48`	Pixels scrolled per arrow press.
`options`	`PartialOptions`		Extra OverlayScrollbars options.
`events`	`EventListeners`		OverlayScrollbars events.
`defer`	`boolean` \| `IdleRequestOptions`		Initializes when the browser is idle.
HTML Attributes

Components

ScrollBar

Usage

Overflow

Expanded

Size

Existing element

Auto-hide

Arrows

Hidden track

Keyboard and accessibility

Component Props