Use Reactive properties

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

Property	Type	Description
isReachStart	boolean	Whether the scroll has reached the start.
isReachEnd	boolean	Whether 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

JavaScript

<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;
});

React

import * as React from "react";
import { useConveyer } from "@egjs/react-conveyer";

export default function HorizontalScroll() {
  const ref = React.useRef<HTMLDivElement>();
  const {
    isReachStart,
    isReachEnd,
  } = useConveyer(ref, {
    horizontal: true,
  });
  return <div className="examples">
    <div className="buttons">
      <button className="prev" disabled={isReachStart}>Start</button>
      <button className="next" disabled={isReachEnd}>End</button>
    </div>
    <div className="items horizontal" ref={ref}>
      <div className="item">1</div>
      <div className="item">2</div>
      <div className="item">3</div>
      <div className="item">4</div>
      <div className="item">5</div>
      <div className="item">6</div>
      <div className="item">7</div>
      <div className="item">8</div>
      <div className="item">9</div>
      <div className="item">10</div>
    </div>
  </div>;
}

Vue@2

<template>
<div class="examples">
  <div class="buttons">
    <button class="prev" :disabled="isReachStart">Start</button>
    <button class="next" :disabled="isReachEnd">End</button>
  </div>
  <div class="items horizontal" ref="ref">
    <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>
</template>
<script lang="ts">
import { useConveyer } from "@egjs/vue2-conveyer";

export default {
  setup() {
    const {
      ref,
      isReachStart,
      isReachEnd,
    } = useConveyer();

    return {
      ref,
      isReachStart,
      isReachEnd,
    };
  },
};
</script>

Vue@3

<template>
<div class="examples">
  <div class="buttons">
    <button class="prev" :disabled="isReachStart">Start</button>
    <button class="next" :disabled="isReachEnd">End</button>
  </div>
  <div class="items horizontal" ref="ref">
    <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>
</template>
<script lang="ts">
import { useConveyer } from "@egjs/vue-conveyer";

export default {
  setup() {
    const {
      ref,
      isReachStart,
      isReachEnd,
    } = useConveyer();

    return {
      ref,
      isReachStart,
      isReachEnd,
    };
  },
};
</script>

Angular

<div class="examples">
  <div class="buttons">
    <button class="prev" [disabled]="conveyer.isReachStart">Start</button>
    <button class="next" [disabled]="conveyer.isReachEnd">End</button>
  </div>
  <div class="items horizontal" ngxConveyer #conveyer="ngxConveyer">
    <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>

Svelte

<script>
  import { useConveyer } from "@egjs/svelte-conveyer";

  const {
    ref,
    isReachStart,
    isReachEnd,
  } = useConveyer();
</script>
<div class="examples">
  <div class="buttons">
    <button class="prev" disabled={$isReachStart}>Start</button>
    <button class="next" disabled={$isReachEnd}>End</button>
  </div>
  <div class="items horizontal" use:ref>
    <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>