j-Scrollbar

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Barras de desplazamiento personalizadas. IMPORTANTE: Envuelve el contenido actual agregando dos elementos div anidados con la posición relative. Funciona solo con jComponent v17.

Configuración:

parent selector {String} para un elemento principal, puede contener window (predeterminado: undefined)
visibleX {Booleano} siempre muestra la barra de desplazamiento horizontal (predeterminado: false)
visibleY {Booleano} siempre muestra la barra de desplazamiento vertical (predeterminado: false)
offset {Booleano} agrega offset.top de este elemento (predeterminado: false)
reset {Booleano} restablece la posición si se cambia el path (predeterminado: true)
margin {Número} un margen para todo tipo de pantallas (predeterminado: 0)
marginxs {Número} un margen para pantallas XS (predeterminado: 0)
marginsm {Número} un margen para pantallas SM (predeterminado: 0)
marginmd {Número} un margen para pantallas MD (predeterminado: 0)
marginlg {Número} un margen para pantallas LG (predeterminado: 0)
track {String} solo puede rastrear rutas definidas, p. FIELD1,FIELD2,FIELD3, las rutas se vincularán con component.path

Métodos:

component.reset() restablece la posición a 0,0
component.scrollleft(val) se desplaza X
component.scrolltop(val) se desplaza Y
component.scrollright(val) desplaza X desde el lado derecho
component.scrollbottom(val) desplaza Y desde la parte inferior
component.scroll(x, y) se desplaza X,Y
component.resize() cambia el tamaño del contenedor (reacciona automáticamente a los eventos resize)

Úselo con <ui-component name="scrollbar">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>