Use scrollIntoView Method (side to side)

You can use the conveyer's methods via instance or result.

You can also use scroll-related functions through methods.

scrollIntoView

.scrollIntoView method scrolls an element or an item in that direction into the view.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
target	HTMLElement | "start" | "end" | "prev" | "next"			direction of the element. "start" and "end" find inside. "prev" and "next" find outside.
options	ScrollIntoViewOptions	✔️	{}	Options for the scrollIntoView method.

target

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

align

Example

• If you click the prev button, you can align the items in the start(target) direction to end(align).
• If you click the next button, you can align the items in the end(target) direction to start(align).

1

2

3

4

5

6

7

8

9

10

JavaScript

<div class="examples">
  <div class="buttons">
    <button class="prev">prev</button>
    <button class="next">next</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", {
  horizontal: false,
});

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

// scrollIntoView
prev.addEventListener("click", () => {
  // start to end
  conveyer.scrollIntoView("start", {
    align: "end",
    duration: 500,
    excludeStand: true,
  });
});
next.addEventListener("click", () => {
  // end to start
  conveyer.scrollIntoView("end", {
    align: "start",
    duration: 500,
    excludeStand: true,
  });
});

React

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

export default function HorizontalScroll() {
  const ref = React.useRef<HTMLDivElement>();
  const {
    scrollIntoView,
  } = useConveyer(ref, {
    horizontal: true,
  });
  return <div className="examples">
    <div className="buttons">
      <button className="prev" onClick={() => {
        // start to end
        scrollIntoView("start", {
          align: "end",
          duration: 500,
          excludeStand: true,
        });
      }}>Prev</button>
      <button className="next" onClick={() => {
        // end to start
        scrollIntoView("end", {
          align: "start",
          duration: 500,
          excludeStand: true,
        });
      }}>Next</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" @click="prev">prev</button>
    <button class="next" :disabled="isReachEnd" @click="next">next</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 { MasonryInfiniteGrid } from "@egjs/vue-infinitegrid";
import { useConveyer } from "@egjs/vue2-conveyer";

export default {
  components: {
    MasonryInfiniteGrid,
  },
  setup() {
    const { ref, scrollIntoView } = useConveyer({
      horizontal: false,
    });

    return {
      ref,
      scrollIntoView,
    };
  },
  methods: {
    prev() {
      this.scrollIntoView("start", {
        align: "end",
        duration: 500,
        excludeStand: true,
      });
    },
    next() {
      this.scrollIntoView("end", {
        align: "start",
        duration: 500,
        excludeStand: true,
      });
    },
  },
};
</script>

Vue@3

<template>
<div class="examples">
  <div class="buttons">
    <button class="prev" :disabled="isReachStart" @click="prev">prev</button>
    <button class="next" :disabled="isReachEnd" @click="next">next</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 { MasonryInfiniteGrid } from "@egjs/vue3-infinitegrid";
import { useConveyer } from "@egjs/vue-conveyer";

export default {
  components: {
    MasonryInfiniteGrid,
  },
  setup() {
    const { ref, scrollIntoView } = useConveyer({
      horizontal: false,
    });

    return {
      ref,
      scrollIntoView,
    };
  },
  methods: {
    prev() {
      this.scrollIntoView("start", {
        align: "end",
        duration: 500,
        excludeStand: true,
      });
    },
    next() {
      this.scrollIntoView("end", {
        align: "start",
        duration: 500,
        excludeStand: true,
      });
    },
  },
};
</script>

Angular

<div class="examples">
  <div class="buttons">
    <button class="prev" (click)="prev()">prev</button>
    <button class="next" (click)="next()">next</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>

import { Component, Input } from '@angular/core';
import { NgxConveyerDirective } from 'ngx-conveyer';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
    "./app.component.css",
  ],
})
export class AppComponent {
  @ViewChild('conveyer', { static: false }) conveyer!: NgxConveyerDirective;
  prev() {
    this.conveyer.scrollIntoView("start", {
      align: "end",
      duration: 500,
      excludeStand: true,
    });
  }
  next() {
    this.conveyer.scrollIntoView("end", {
      align: "start",
      duration: 500,
      excludeStand: true,
    });
  }
}

Svelte

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

  const {
    scrollIntoView,
    ref,
  } = useConveyer({
    horizontal: false,
    autoInit: false,
  });
</script>
<div class="examples">
  <div className="buttons">
    <button className="prev" disabled={$isReachStart} on:click={() => {
      // start to end
      scrollIntoView("start", {
        align: "end",
        duration: 500,
        excludeStand: true,
      });
    }}>Prev</button>
    <button className="next" disabled={$isReachEnd} on:click={() => {
      // end to start
      scrollIntoView("end", {
        align: "start",
        duration: 500,
        excludeStand: true,
      });
    }}>Next</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>