Skip to main content
Version: 1.7.1

Use scrollIntoView Method (intersection 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.

Also, if the intersection option is enabled, items overlapping on the side can also be included in the target.

target with intersection (start, end)

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

align

target with intersection (prev, next)

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
<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,
    intersection: true,
  });
});
next.addEventListener("click", () => {
  // end to start
  conveyer.scrollIntoView("end", {
    align: "start",
    duration: 500,
    intersection: true,
  });
});