Horizontal Scroll

You can use drag-based scrolling with NativeScroll.

Property	Type	Description
horizontal	string	scroll direction. (default: true)

1

2

3

4

5

6

7

8

9

10

JavaScript

<div class="examples">
  <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");

React

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

export default function HorizontalScroll() {
  const ref = React.useRef<HTMLDivElement>();
  useConveyer(ref, {
    horizontal: true,
  });
  return <div className="examples">
    <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="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 } = useConveyer();

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

Vue@3

<template>
<div class="examples">
  <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 } = useConveyer();

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

Angular

<div class="examples">
  <div class="items horizontal" 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,
  } = useConveyer();
</script>
<div class="examples">
  <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>