본문으로 건너뛰기
Version: 1.1.0

Use Reactive properties

You can change the state using properties without having to use events.

PropertyTypeDescription
isReachStartbooleanWhether the scroll has reached the start.
isReachEndbooleanWhether the scroll has reached the end.

Example

You can disable prev and next buttons through isReachStart and isReachEnd properties.

1
2
3
4
5
6
7
8
9
10
<div class="examples">
<div class="buttons">
<button class="prev" disabled>Start</button>
<button class="next">End</button>
</div>
<div class="items horizontal">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
import Conveyer from "@egjs/conveyer";

const conveyer = new Conveyer(".items");

const prev = document.querySelector(".prev");
const next = document.querySelector(".next");

// subscribe reactive properties
conveyer.subscribe("isReachStart", (isReachStart) => {
prev.disabled = isReachStart;
});

conveyer.subscribe("isReachEnd", (isReachEnd) => {
next.disabled = isReachEnd;
});