# j-Scrollbar

> Custom scrollbars. IMPORTANT: It wraps current content by adding two nested div elements with relative position. It works with jComponent v17 only.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 91f89113cd8f6a15c7c8664e0d8ac59c996092e5e1939864458e36ca6c8216fa
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Custom scrollbars. __IMPORTANT:__ It wraps current content by adding two nested `div` elements with `relative` position. __It works with jComponent v17 only__.

__Configuration__:

- `parent` {String} selector for a parent element, can contain `window` (default: `undefined`)
- `visibleX` {Boolean} always shows horizontal scrollbar (default: `false`)
- `visibleY` {Boolean} always shows vertical scrollbar (default: `false`)
- `offset` {Boolean} adds `offset.top` of this element (default: `false`)
- `reset` {Boolean} resets position if the `path` is changed (default: `true`)
- `margin` {Number} a margin for all types of displays (default: `0`)
- `marginxs` {Number} a margin for `XS` displays (default: `0`)
- `marginsm` {Number} a margin for `SM` displays (default: `0`)
- `marginmd` {Number} a margin for `MD` displays (default: `0`)
- `marginlg` {Number} a margin for `LG` displays (default: `0`)
- `track` {String} can track only defined paths e.g. `FIELD1,FIELD2,FIELD3`, paths will linked with `component.path`

__Methods__:

- `component.reset()` resets the position to `0,0`
- `component.scrollleft(val)` scrolls X
- `component.scrolltop(val)` scrolls Y
- `component.scrollright(val)` scrolls X from right side
- `component.scrollbottom(val)` scrolls Y from bottom side
- `component.scroll(x, y)` scrolls X,Y
- `component.resize()` resizes container (it reacts on `resize` events automatically)

Use it with `<ui-component name="scrollbar">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

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