docs: add intersection example

packages/docs/docs/codes/Intersection/angularComponent.txt

@@ -0,0 +1,27 @@
+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,
+      intersection: true,
+    });
+  }
+  next() {
+    this.conveyer.scrollIntoView("end", {
+      align: "start",
+      duration: 500,
+      intersection: true,
+    });
+  }
+}

packages/docs/docs/codes/Intersection/angularHTML.txt

@@ -0,0 +1,18 @@
+<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>

packages/docs/docs/codes/Intersection/html.txt

@@ -0,0 +1,18 @@
+<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>

packages/docs/docs/codes/Intersection/js.txt

@@ -0,0 +1,26 @@
+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,
+  });
+});

packages/docs/docs/codes/Intersection/svelte.txt

@@ -0,0 +1,43 @@
+<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,
+        intersection: true,
+      });
+    }}>Prev</button>
+    <button className="next" disabled={$isReachEnd} on:click={() => {
+      // end to start
+      scrollIntoView("end", {
+        align: "start",
+        duration: 500,
+        intersection: 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>

packages/docs/docs/codes/Intersection/vue.txt

@@ -0,0 +1,56 @@
+<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,
+        intersection: true,
+      });
+    },
+    next() {
+      this.scrollIntoView("end", {
+        align: "start",
+        duration: 500,
+        intersection: true,
+      });
+    },
+  },
+};
+</script>

packages/docs/docs/examples/Intersection.mdx

@@ -0,0 +1,33 @@
+---
+title: Use scrollIntoView Method (intersection side)
+custom_edit_url: null
+---
+
+You can use the conveyer's methods via instance or result.
+
+You can also use scroll-related functions through methods.
+
+
+### scrollIntoView
+[`.scrollIntoView`](/docs/api/Conveyer#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.
+
+
+import Intersection from "@site/src/examples/Intersection";
+import { ScrollIntoViewTargetWithIntersection } from "@site/src/examples/ScrollIntoViewTarget";
+import ConveyerCodeTabs from "@site/docs/codes/ConveyerCodeTabs";
+
+<ScrollIntoViewTargetWithIntersection />
+
+
+### 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).
+
+
+<Intersection />
+
+
+<ConveyerCodeTabs folder="Intersection" reactCode={require("!!raw-loader!@site/src/examples/Intersection.tsx").default} />

packages/docs/docs/examples/Methods.mdx

@@ -1,5 +1,5 @@
 ---
-title: Use Methods
+title: Use scrollIntoView Method  (side to side)
 custom_edit_url: null
 ---
 
@@ -9,7 +9,7 @@ You can also use scroll-related functions through methods.
 
 
 ### scrollIntoView
-[scrollIntoView](/docs/api/Conveyer#scrollIntoView) method scrolls an element or an item in that direction into the view.
+[`.scrollIntoView`](/docs/api/Conveyer#scrollIntoView) method scrolls an element or an item in that direction into the view.
 
 |PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
 |:---:|:---:|:---:|:---:|:---:|

packages/docs/sidebars.js

@@ -11,6 +11,7 @@ module.exports = {
     "examples/VerticalScroll",
     "examples/Properties",
     "examples/Methods",
+    "examples/Intersection",
     "examples/InfiniteScroll",
     "examples/SideWheel",
   ],

packages/docs/src/examples/Intersection.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { useConveyer } from "@egjs/react-conveyer";
+
+export default function HorizontalScroll() {
+  const ref = React.useRef<HTMLDivElement>(null);
+  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,
+          intersection: true,
+        });
+      }}>Prev</button>
+      <button className="next" onClick={() => {
+        // end to start
+        scrollIntoView("end", {
+          align: "start",
+          duration: 500,
+          intersection: 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>;
+}

packages/docs/src/examples/ScrollIntoViewTarget.tsx

@@ -12,7 +12,7 @@ function updateItem(items, container, mark, target, className) {
 }
 
 export default function ScrollIntoViewTarget() {
-  const ref = React.useRef<HTMLDivElement>();
+  const ref = React.useRef<HTMLDivElement>(null);
   const containerRef = React.useRef<HTMLDivElement>();
   const { findElement, scrollIntoView } = useConveyer(ref, {
     horizontal: true,
@@ -92,3 +92,89 @@ export default function ScrollIntoViewTarget() {
     <p className="bottom">align</p>
   </div>;
 }
+
+export function ScrollIntoViewTargetWithIntersection() {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const { findElement, scrollIntoView } = useConveyer(ref, {
+    horizontal: true,
+  });
+
+  const onScroll = React.useCallback(() => {
+    requestAnimationFrame(() => {
+      const container = containerRef.current;
+      // const markPrev = document.querySelector(".mark.prev");
+      const markStart = document.querySelector(".mark.start");
+      const markEnd = document.querySelector(".mark.end");
+      // const markNext = document.querySelector(".mark.next");
+      const items = document.querySelectorAll(".item");
+      const backgroundItems = document.querySelectorAll<HTMLElement>(".background-items .item");
+
+      backgroundItems.forEach(element => {
+        element!.style.transform = `translateX(${-ref.current!.scrollLeft}px)`;
+      });
+      items.forEach(item => {
+        item.classList.remove("start", "end");
+      });
+
+      // const prev = findElement("prev");
+      const start = findElement("start", {
+        intersection: true,
+      });
+      const end = findElement("end", {
+        intersection: true,
+      });
+      // const next = findElement("next");
+
+      // prev?.classList.add("prev");
+      start?.classList.add("start");
+      end?.classList.add("end");
+      // next?.classList.add("next");
+
+      // updateItem(backgroundItems, container, markPrev, prev, "prev");
+      updateItem(backgroundItems, container, markStart, start, "start");
+      updateItem(backgroundItems, container, markEnd, end, "end");
+      // updateItem(backgroundItems, container, markNext, next, "next");
+    });
+  }, []);
+
+  React.useEffect(() => {
+    onScroll();
+    scrollIntoView("next", {
+      align: "center",
+      duration: 500,
+    });
+  }, []);
+  return <div className="scroll-into-view-target" ref={containerRef}>
+    <p className="top">target with intersection</p>
+    <div className="background-items">
+      <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 className="items" ref={ref} onScroll={onScroll}>
+      <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 className="mark prev"></div> */}
+    {/* <div className="mark next"></div> */}
+    <div className="mark start"></div>
+    <div className="mark end"></div>
+    <p className="bottom">align</p>
+  </div>;
+}