j-Scrollbar

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

ВЪЗМОЖНО: Той извлича текущото съдържание, като добавя два елемента на div с позиция на relative. __Това работи само с jComponent v17.

Конфигуриране:

parent {String} селектор за родителски елемент, може да съдържа window (предварително: undefined)
visibleX {Boolean} винаги показва хоризонтална лента (предварително: false)
visibleY {Boolean} винаги показва вертикална лента за преминаване (предварително: false)
offset {Boolean} добавя offset.top на този елемент (предварително: false)
reset {Boolean} пренасочва позицията, ако path е променян (предварително: true)
margin {No} марж за всички видове дисплеи (предварително: 0)
marginxs {No} марж за дисплеи на XS (предварително: 0)
marginsm {No} марж за дисплеи на SM (предварително: 0)
marginmd {No} марж за дисплеи на MD (предварително: 0)
marginlg {No} марж за дисплеи на LG (предварително: 0)
track {String} може да следи само определени пътища, например FIELD1,FIELD2,FIELD3, пътищата ще бъдат свързани с component.path

Методи:

component.reset() пренасочва позицията към 0,0
component.scrollleft(val) Скриншоти X
component.scrolltop(val) Скриншоти и
component.scrollright(val) се върти X от дясната страна
component.scrollbottom(val) Скръгли Y от долната страна
component.scroll(x, y) Скриншоти X, Y
component.resize() резиз контейнер (то реагира автоматично на resize събития)

Използвайте го с <ui-component name="scrollbar">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>