# j-Scrollbar

> Barras de desplazamiento personalizadas. IMPORTANTE: envuelve el contenido actual agregando dos elementos div anidados con posición relativa. Funciona únicamente con jComponent v17.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: 0bc500b1e811eefb895e63724680f3010ac38f895cef6bcf97b5d251ce1dfc1c
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Barras de desplazamiento personalizadas. __IMPORTANTE:__ Envuelve el contenido actual agregando dos elementos `div` anidados con la posición `relative`. __Funciona solo con jComponent v17__.

__Configuración__:

- `parent` selector {String} para un elemento principal, puede contener `window` (predeterminado: `undefined`)
- `visibleX` {Booleano} siempre muestra la barra de desplazamiento horizontal (predeterminado: `false`)
- `visibleY` {Booleano} siempre muestra la barra de desplazamiento vertical (predeterminado: `false`)
- `offset` {Booleano} agrega `offset.top` de este elemento (predeterminado: `false`)
- `reset` {Booleano} restablece la posición si se cambia el `path` (predeterminado: `true`)
- `margin` {Número} un margen para todo tipo de pantallas (predeterminado: `0`)
- `marginxs` {Número} un margen para pantallas `XS` (predeterminado: `0`)
- `marginsm` {Número} un margen para pantallas `SM` (predeterminado: `0`)
- `marginmd` {Número} un margen para pantallas `MD` (predeterminado: `0`)
- `marginlg` {Número} un margen para pantallas `LG` (predeterminado: `0`)
- `track` {String} solo puede rastrear rutas definidas, p. `FIELD1,FIELD2,FIELD3`, las rutas se vincularán con `component.path`

__Métodos__:

- `component.reset()` restablece la posición a `0,0`
- `component.scrollleft(val)` se desplaza X
- `component.scrolltop(val)` se desplaza Y
- `component.scrollright(val)` desplaza X desde el lado derecho
- `component.scrollbottom(val)` desplaza Y desde la parte inferior
- `component.scroll(x, y)` se desplaza X,Y
- `component.resize()` cambia el tamaño del contenedor (reacciona automáticamente a los eventos `resize`)

Úselo con `<ui-component name="scrollbar">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

```html example.html
<ui-component name="scrollbar" style="background-color:rgba(100,100,100,0.05);height:200px;width:300px" class="hidden" data-jc-class="hidden">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
</ui-component>
```