j-Scrollbar

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

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.

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>