# j-Scrollbar

> Beperkte scrollbars. IMPORTANT: Het wrapt de huidige inhoud door twee nested div-elementen met relatieve positie toe te voegen. jComponent V17 alleen maar.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: nl
Content-SHA256: 2b1deb0816feb23bed7dbcfc7bab82c674c6b5e1ad046943699a9c9361638da4
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Custom scrollbars. __IMPORTANT:__ Het wrapt de huidige inhoud door twee nestde `div` elementen met `relative` positie toe te voegen. __Het werkt met jComponent v17 alleen__.

__Configuratie__:

- `parent` {String} selector voor een moederelement, kan `window` bevatten (default: `undefined`)
- `visibleX` {Boolean} toont altijd de horizontaal scrollbar (default: `false`)
- `visibleY` {Boolean} toont altijd een verticale scrollbar (default: `false`)
- `offset` {Boolean} voegt `offset.top` toe aan dit element (default: `false`)
- `reset` {Boolean} herstelt de positie als de `path` is gewijzigd (default: `true`)
- `margin` {Nummer} een marge voor alle soorten afbeeldingen (default: `0`)
- `marginxs` {Nummer} een marge voor `XS` afbeeldingen (default: `0`)
- `marginsm` {Nummer} een marge voor `SM` afbeeldingen (default: `0`)
- `marginmd` {Nummer} een marge voor `MD` afbeeldingen (default: `0`)
- `marginlg` {Nummer} een marge voor `LG` afbeeldingen (default: `0`)
- `track` {String} kan alleen gedefinieerde paden volgen, bijvoorbeeld `FIELD1,FIELD2,FIELD3`, de paden zullen verbonden zijn met `component.path`

__Methoden__:

- `component.reset()` herstelt de positie naar `0,0`
- `component.scrollleft(val)` scrolls X
- `component.scrolltop(val)` scrolls en
- `component.scrollright(val)` scrollt X van de rechterkant
- `component.scrollbottom(val)` scrolls Y van de onderkant
- `component.scroll(x, y)` scrolls X, en
- `component.resize()` reageert op de container (het reageerde automatisch op de gebeurtenissen van `resize`)

Gebruik het met `<ui-component name="scrollbar">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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