Listen to Events

Conveyer has scroll related events.

You can refer to the documentation and use it according to each framework.

JavaScript

You can listen to Conveyer's events with Conveyer#on

Since events occur during initialization, set autoInit to false if you want to register events.

import Conveyer from "@egjs/conveyer";

const conveyer = new Conveyer(".items", {
  autoInit: false,
});

conveyer.on("scrollStart", evt => {
  console.log(evt);
});

conveyer.init();

React

You can use events of Conveyer by getting a result of useConveyer.

All events are prefixed with on-, and camelCased.

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

export default () => {
  const ref = useRef();
  const {
    scrollIntoView,
    onBeginScroll,
  } = useConveyer(ref);

  onBeginScroll(() => {
    console.log("begin scroll");
  }, []);

  return <div className="container">
    <div className="buttons">
      <button className="prev" onClick={() => {
        // start to end
        scrollIntoView("start", {
          align: "end",
          duration: 500,
        });
      }}>Prev</button>
      <button className="next" onClick={() => {
        // end to start
        scrollIntoView("end", {
          align: "start",
          duration: 500,
        });
      }}>Next</button>
    </div>
    <div className="items" ref={ref}>
      <div className="item">1</div>
      <div className="item">2</div>
      <div className="item">3</div>
    </div>
  </div>;
};

See React Refs and the DOM for more info.

Vue@2

You can use events of Conveyer by getting a result of useConveyer.

All events are prefixed with on-, and camelCased.

<template>

<div class="items" ref="ref">
  <button id="prev" @click="prev">prev</button>
  <button id="next" @click="next">next</button>
  <div class="items" ref="ref">
    <div class="item"><a href="#1">1</a></div>
    <div class="item"><a href="#2">2</a></div>
    <div class="item"><a href="#3">3</a></div>
  </div>
</div>

<script>

import { useConveyer } from "@egjs/vue-conveyer";

export default {
  setup() {
    const {
      ref,
      scrollIntoView,
      // events
      onBeginScroll,
    } = useConveyer({
      horizontal: false,
    });

    onBeginScroll(() => {
      console.log("begin scroll");
    });

    return {
      ref,
      scrollIntoView,
  };
  },
  methods: {
    prev() {
      this.scrollIntoView("start", {
        align: "end",
        duration: 500,
      });
    },
    next() {
      this.scrollIntoView("end", {
        align: "start",
        duration: 500,
      });
    },
  },
};

Vue@3

You can call methods of Conveyer by getting a result of useConveyer.

All events are prefixed with on-, and camelCased.

<template>

<div class="items" ref="ref">
  <button id="prev" @click="prev">prev</button>
  <button id="next" @click="next">next</button>
  <div class="items" ref="ref">
    <div class="item"><a href="#1">1</a></div>
    <div class="item"><a href="#2">2</a></div>
    <div class="item"><a href="#3">3</a></div>
  </div>
</div>

<script>

import { useConveyer } from "@egjs/vue2-conveyer";

export default {
  setup() {
    const {
      ref,
      scrollIntoView,
      // events
      onBeginScroll,
    } = useConveyer({
      horizontal: false,
    });

    onBeginScroll(() => {
      console.log("begin scroll");
    });

    return {
      ref,
      scrollIntoView,
  };
  },
  methods: {
    prev() {
      this.scrollIntoView("start", {
        align: "end",
        duration: 500,
      });
    },
    next() {
      this.scrollIntoView("end", {
        align: "start",
        duration: 500,
      });
    },
  },
};

Angular

There're few ways to interact with child component in Angular.
See Component Interaction page from Angular official document, and use that to interact with Conveyer.

You can listen events of the ngx-conveyer using Angular's event binding.

app.component.html

<div class="container">
  <button id="prev" (click)="prev()">prev</button>
  <button id="next" (click)="next()">next</button>
  <div
    class="items"
    ngxConveyer
    (beginScroll)="onBeginScroll"
    #conveyer="ngxConveyer"
    >
    <div class="item"><a href="#1">1</a></div>
    <div class="item"><a href="#2">2</a></div>
    <div class="item"><a href="#3">3</a></div>
    <div class="item"><a href="#4">4</a></div>
    <div class="item"><a href="#5">5</a></div>
    <div class="item"><a href="#6">6</a></div>
    <div class="item"><a href="#7">7</a></div>
    <div class="item"><a href="#8">8</a></div>
    <div class="item"><a href="#9">9</a></div>
    <div class="item"><a href="#10">10</a></div>
    <div class="item"><a href="#11">11</a></div>
    <div class="item"><a href="#12">12</a></div>
  </div>
</div>

app.component.ts

import { Component, Input, AfterViewInit } from '@angular/core';

import { NgxConveyerDirective } from 'ngx-conveyer';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements AfterViewInit {
  @ViewChild("conveyer") conveyer!: NgxConveyerDirective;
  onBeginScroll() {
    console.log("begin scroll");
  }
  prev() {
    this.conveyer.scrollIntoView("start", {
      align: "end",
      duration: 500,
    });
  }
  next() {
    this.conveyer.scrollIntoView("end", {
      align: "start",
      duration: 500,
    });
  }
}

Svelte

All events are prefixed with on-, and camelCased.

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

  const {
    ref,
    scrollIntoView,
    // events
    onBeginScroll,
  } = useConveyer();

  onBeginScroll(() => {
    console.log("begin scroll");
  });
</script>
<div class="container">
  <div class="buttons">
    <button class="prev" on:click={() => {
      // start to end
      scrollIntoView("start", {
        align: "end",
        duration: 500,
      });
    }}>Prev</button>
    <button class="next" on:click={() => {
      // end to start
      scrollIntoView("end", {
        align: "start",
        duration: 500,
      });
    }}>Next</button>
  </div>
  <div class="items" use:ref>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>

See all available events at Conveyer#events.