j-Scrollbar

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

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.

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>