j-Scrollbar

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

IMPORTANTE: Ele coloca o conteúdo atual adicionando dois elementos de div com posição de relative. Funciona com jComponent v17 apenas.

Configuração:

parent {String} selector para um elemento parental, pode conter window (default: undefined)
visibleX {Boolean} sempre mostra a barra de rolamento horizontal (default: false)
visibleY {Boolean} sempre mostra a barra de rolamento vertical (default: false)
offset {Boolean} adiciona offset.top deste elemento (default: false)
reset {Boolean} retoma a posição se o path for alterado (default: true)
margin {Número} uma margem para todos os tipos de exibições (default: 0)
marginxs {Número} uma margem para exibições de XS (default: 0)
marginsm {Número} uma margem para exibições de SM (default: 0)
marginmd {Número} uma margem para exibições de MD (default: 0)
marginlg {Número} uma margem para exibições de LG (default: 0)
track {String} só pode rastrear caminhos definidos, por exemplo, FIELD1,FIELD2,FIELD3, os caminhos estarão ligados a component.path

Métodos:

component.reset() retoma a posição para 0,0
component.scrollleft(val) em torno de X
component.scrolltop(val) em torno de Y
component.scrollright(val): o X de lado direito
component.scrollbottom(val) é a parte inferior
component.scroll(x, y) escorregados X, Y
component.resize() resissa o recipiente (reage automaticamente aos eventos de resize)

Use-o com <ui-component name="scrollbar">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença MIT.

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>