ScrollBar

Un ScrollBar permite desplazar contenido que desborda su contenedor. En reposo muestra un thumb delgado sobre el contenido; al pasar el cursor se expande en un track con flechas.

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.

Uso

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

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

Desbordamiento

overflow define los ejes que se desplazan: auto (por defecto, solo los ejes que desbordan), y, x o both.

Ver Código

<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"

Expandido

Mantiene visibles el track, el thumb y las flechas.

Ver Código

<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

Tamaño

size ajusta la barra expandida a thin, medium (por defecto) o large.

Ver Código

<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

Elemento existente

Añade las barras a un elemento existente en lugar de renderizar uno.

Ver Código

<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

Ocultación automática

Controla cuándo se oculta la barra.

Ver Código

<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

Flechas

Oculta los botones de flecha.

Ver Código

<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.

Track oculto

Oculta el track cuando la barra se expande.

Ver Código

<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.

Teclado y accesibilidad

El área desplazable recibe el foco y se desplaza con el teclado. Ponle nombre con viewportAttributes.

Propiedades del componente

Name	Type	Default	Description
`as`	`'div'` \| `'section'` \| `'article'` \| `'aside'` \| `'main'` \| `'nav'` \| `'ul'` \| `'ol'`	`'div'`	El elemento a renderizar.
`ref` bindable	`HTMLElement`		El elemento raíz.
`scrollRef`	`HTMLElement` \| `null`		Un elemento existente al que añadir las barras en lugar de renderizar uno.
`viewportRef` bindable	`HTMLElement` \| `null`		El elemento que se desplaza.
`viewportAttributes`	`HTMLAttributes<HTMLDivElement>`		Atributos del elemento que se desplaza.
`expanded`	`boolean`		Mantiene la barra expandida.
`collapseDelay`	`number`	`2000`	Milisegundos de espera antes de contraerse cuando el puntero sale.
`instance` bindable	`OverlayScrollbars` \| `null`		La instancia de OverlayScrollbars.
`overflow`	`'auto'` \| `'x'` \| `'y'` \| `'both'`	`'auto'`	Los ejes que se pueden desplazar.
`autoHide`	`'never'` \| `'scroll'` \| `'leave'` \| `'move'`	`'move'`	Cuándo se oculta la barra.
`autoHideDelay`	`number`	`1000`	Milisegundos de espera antes de ocultarse.
`hideArrows`	`boolean`		Oculta los botones de flecha.
`showFocusOutline`	`boolean`		Muestra el contorno de foco del área desplazable.
`hideTrack`	`boolean`		Oculta el track.
`size`	`'thin'` \| `'medium'` \| `'large'`	`'medium'`	El tamaño de la barra expandida.
`arrowStep`	`number`	`48`	Píxeles desplazados por cada pulsación de flecha.
`options`	`PartialOptions`		Opciones adicionales de OverlayScrollbars.
`events`	`EventListeners`		Eventos de OverlayScrollbars.
`defer`	`boolean` \| `IdleRequestOptions`		Se inicializa cuando el navegador está inactivo.
HTML Attributes

Componentes

ScrollBar

Uso

Desbordamiento

Expandido

Tamaño

Elemento existente

Ocultación automática

Flechas

Track oculto

Teclado y accesibilidad

Propiedades del componente