j-Scrollbar

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Anpassad skruvbars. IMPORTANT: Det ställer in aktuellt innehåll genom att lägga till två nycklade div-element med relative position. Det fungerar med jComponent v17 endast.

Konfigurera:

parent {String} selektor för ett föräldralement, kan innehålla window (default: undefined)
visibleX {Boolean} visar alltid horisontell skruvbar (default: false)
visibleY {Boolean} visar alltid vertikal skruvbar (default: false)
offset {Boolean} lägger till offset.top av detta element (default: false)
reset {Boolean} återställer positionen om path ändras (default: true)
margin {Numret} en marginal för alla typer av skärmar (default: 0)
marginxs {Numret} en marginal för XS-skärmar (default: 0)
marginsm {Numret} en marginal för SM-skärmar (default: 0)
marginmd {Numret} en marginal för MD-skärmar (default: 0)
marginlg {Numret} en marginal för LG-skärmar (default: 0)
track {String} kan spåra endast definierade vägar t.ex. FIELD1,FIELD2,FIELD3, vägarna kommer att kopplas till component.path

Metoder:

component.reset() återställer positionen till 0,0
component.scrollleft(val) skruvar X
component.scrolltop(val) skruvar och
component.scrollright(val) snurrar X från höger sida
component.scrollbottom(val) skruvar Y från botten
component.scroll(x, y) skruvar X,Y
component.resize() residerar behållaren (det reagerar automatiskt på resize händelser)

Använd den med <ui-component name="scrollbar">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>