본문으로 건너뛰기
Version: 1.7.1

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.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
targetHTMLElement | "start" | "end" | "prev" | "next"

direction of the element. "start" and "end" find inside. "prev" and "next" find outside.

optionsScrollIntoViewOptions✔️{}

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