diff --git a/lerna.json b/lerna.json
index f148ee70..b0948a73 100644
--- a/lerna.json
+++ b/lerna.json
@@ -17,6 +17,9 @@
       }
     ],
     "beforeReleaseScripts": [
+      "npm run packages:build",
+      "npm run demo:build",
+      "npm run demo:deploy"
     ]
   }
 }
diff --git a/packages/docs/versioned_docs/version-1.6.1/api/CONVEYER_METHODS.mdx b/packages/docs/versioned_docs/version-1.6.1/api/CONVEYER_METHODS.mdx
new file mode 100644
index 00000000..c508a257
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/api/CONVEYER_METHODS.mdx
@@ -0,0 +1,14 @@
+---
+custom_edit_url: null
+---
+
+```ts
+const CONVEYER_METHODS
+```
+
+<div>
+
+</div>
+
+<p>egjs-conveyer<br />Copyright (c) 2022-present NAVER Corp.<br />MIT license</p>
+
diff --git a/packages/docs/versioned_docs/version-1.6.1/api/Component.mdx b/packages/docs/versioned_docs/version-1.6.1/api/Component.mdx
new file mode 100644
index 00000000..95e389b6
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/api/Component.mdx
@@ -0,0 +1,211 @@
+---
+custom_edit_url: null
+---
+
+```ts
+class Component
+```
+
+<div>
+
+</div>
+
+<p>A class used to manage events in a component</p>
+
+<div className="container">
+  <div className="row mb-2"><div className="col col--6"><strong>Properties</strong></div><div className="col col--6"><strong>Methods</strong></div></div>
+  <div className="row"><div className="col col--6"><a href="#VERSION">VERSION</a><span className="badge badge--info margin-left--sm">static</span></div><div className="col col--6"><a href="#trigger">trigger</a><br/><a href="#once">once</a><br/><a href="#hasOn">hasOn</a><br/><a href="#on">on</a><br/><a href="#off">off</a></div></div>
+</div>
+
+## Properties
+### VERSION {#VERSION}
+
+<div>
+  <span className="badge badge--info">static</span>
+</div>
+
+<p>Version info string</p>
+
+**Type**: string
+
+Component.VERSION;  // ex) 3.0.0
+
+## Methods
+
+### trigger {#trigger}
+
+<div>
+
+</div>
+
+<p>Trigger a custom event.</p>
+
+**Returns**: this
+- <p>An instance of the component itself</p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|event|string \| ComponentEvent|||<p>The name of the custom event to be triggered or an instance of the ComponentEvent</p>|
+|params|Array&lt;any&gt; \| $ts:...|||<p>Event data to be sent when triggering a custom event </p>|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  beforeHi: ComponentEvent<{ foo: number; bar: string }>;
+  hi: { foo: { a: number; b: boolean } };
+  someEvent: (foo: number, bar: string) => void;
+  someOtherEvent: void; // When there's no event argument
+}> {
+  some(){
+    if(this.trigger("beforeHi")){ // When event call to stop return false.
+      this.trigger("hi");// fire hi event.
+    }
+  }
+}
+
+const some = new Some();
+some.on("beforeHi", e => {
+  if(condition){
+    e.stop(); // When event call to stop, `hi` event not call.
+  }
+  // `currentTarget` is component instance.
+  console.log(some === e.currentTarget); // true
+
+  typeof e.foo; // number
+  typeof e.bar; // string
+});
+some.on("hi", e => {
+  typeof e.foo.b; // boolean
+});
+// If you want to more know event design. You can see article.
+// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F
+```
+
+### once {#once}
+
+<div>
+
+</div>
+
+<p>Executed event just one time.</p>
+
+**Returns**: this
+- <p>An instance of the component itself</p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string \| $ts:...|||<p>The name of the event to be attached or an event name - event handler mapped object.</p>|
+|handlerToAttach|function \| $ts:...|✔️||<p>The handler function of the event to be attached </p>|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  hi: ComponentEvent;
+}> {
+  hi() {
+    alert("hi");
+  }
+  thing() {
+    this.once("hi", this.hi);
+  }
+}
+
+var some = new Some();
+some.thing();
+some.trigger(new ComponentEvent("hi"));
+// fire alert("hi");
+some.trigger(new ComponentEvent("hi"));
+// Nothing happens
+```
+
+### hasOn {#hasOn}
+
+<div>
+
+</div>
+
+<p>Checks whether an event has been attached to a component.</p>
+
+**Returns**: boolean
+- <p>Indicates whether the event is attached. </p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string|||<p>The name of the event to be attached </p>|
+
+```ts
+import Component from "@egjs/component";
+
+class Some extends Component<{
+  hi: void;
+}> {
+  some() {
+    this.hasOn("hi");// check hi event.
+  }
+}
+```
+
+### on {#on}
+
+<div>
+
+</div>
+
+<p>Attaches an event to a component.</p>
+
+**Returns**: this
+- <p>An instance of a component itself</p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string \| $ts:...|||<p>The name of the event to be attached or an event name - event handler mapped object.</p>|
+|handlerToAttach|function \| $ts:...|✔️||<p>The handler function of the event to be attached </p>|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  hi: void;
+}> {
+  hi() {
+    console.log("hi");
+  }
+  some() {
+    this.on("hi",this.hi); //attach event
+  }
+}
+```
+
+### off {#off}
+
+<div>
+
+</div>
+
+<p>Detaches an event from the component.<br/>If the <code>eventName</code> is not given this will detach all event handlers attached.<br/>If the <code>handlerToDetach</code> is not given, this will detach all event handlers for <code>eventName</code>.</p>
+
+**Returns**: this
+- <p>An instance of a component itself </p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string \| $ts:...|✔️||<p>The name of the event to be detached </p>|
+|handlerToDetach|function \| $ts:...|✔️||<p>The handler function of the event to be detached </p>|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  hi: void;
+}> {
+  hi() {
+    console.log("hi");
+  }
+  some() {
+    this.off("hi",this.hi); //detach event
+  }
+}
+```
+
diff --git a/packages/docs/versioned_docs/version-1.6.1/api/Conveyer.mdx b/packages/docs/versioned_docs/version-1.6.1/api/Conveyer.mdx
new file mode 100644
index 00000000..e085ed8f
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/api/Conveyer.mdx
@@ -0,0 +1,486 @@
+---
+custom_edit_url: null
+---
+
+```ts
+class Conveyer extends Component
+```
+
+<div>
+
+</div>
+
+<p>Conveyer adds Drag gestures to your Native Scroll.</p>
+
+<div className="container">
+  <div className="row mb-2"><div className="col col--4"><strong>Properties</strong></div><div className="col col--4"><strong>Methods</strong></div><div className="col col--4"><strong>Events</strong></div></div>
+  <div className="row"><div className="col col--4"><a href="#isReachStart">isReachStart</a><br/><a href="#isReachEnd">isReachEnd</a><br/><a href="#scrollPos">scrollPos</a></div><div className="col col--4"><a href="#findElement">findElement</a><br/><a href="#findItem">findItem</a><br/><a href="#scrollIntoView">scrollIntoView</a><br/><a href="#scrollBy">scrollBy</a><br/><a href="#scrollTo">scrollTo</a><br/><a href="#setItems">setItems</a><br/><a href="#updateItems">updateItems</a><br/><a href="#updateContainer">updateContainer</a><br/><a href="#update">update</a><br/><a href="#init">init</a><br/><a href="#destroy">destroy</a><br/><a href="#trigger">trigger</a><br/><a href="#once">once</a><br/><a href="#hasOn">hasOn</a><br/><a href="#on">on</a><br/><a href="#off">off</a></div><div className="col col--4"><a href="#event-reachStart">reachStart</a><br/><a href="#event-leaveStart">leaveStart</a><br/><a href="#event-reachEnd">reachEnd</a><br/><a href="#event-leaveEnd">leaveEnd</a><br/><a href="#event-beginScroll">beginScroll</a><br/><a href="#event-finishScroll">finishScroll</a></div></div>
+</div>
+
+## constructor
+```ts
+new Conveyer(scrollArea, options)
+```
+
+<div>
+
+</div>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|scrollArea|string \| HTMLElement \| Ref&lt;HTMLElement&gt;|||<p>A base element for a module </p>|
+|options|[ConveyerOptions](ConveyerOptions)|✔️|{}|<p>The option object of the InfiniteGrid module </p>|
+
+```html
+<div class="items">
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+<script>
+import Conveyer from "@egjs/conveyer";
+
+const conveyer = new Conveyer(".items");
+</script>
+```
+
+## Properties
+
+### isReachStart {#isReachStart}
+
+<div>
+  <span className="badge badge--warning">readonly</span>
+</div>
+
+<p>Whether the scroll has reached the start.</p>
+
+**Type**: boolean
+
+**Default**: true
+
+```js
+import { Conveyer } from "@egjs/conveyer";
+
+const conveyer = new Conveyer(".container");
+
+conveyer.isReachStart
+```
+
+### isReachEnd {#isReachEnd}
+
+<div>
+  <span className="badge badge--warning">readonly</span>
+</div>
+
+<p>Whether the scroll has reached the end.</p>
+
+**Type**: boolean
+
+**Default**: false
+
+```js
+import { Conveyer } from "@egjs/conveyer";
+
+const conveyer = new Conveyer(".container");
+
+conveyer.isReachEnd
+```
+
+### scrollPos {#scrollPos}
+
+<div>
+  <span className="badge badge--warning">readonly</span>
+</div>
+
+<p>the scroll position of the container</p>
+
+**Type**: number
+
+**Default**: 0
+
+```js
+import { Conveyer } from "@egjs/conveyer";
+
+const conveyer = new Conveyer(".container");
+
+conveyer.scrollPos
+```
+
+## Methods
+
+### findElement {#findElement}
+
+<div>
+
+</div>
+
+<p>Finds an element for that direction.</p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|direction|"start" \| "end" \| "prev" \| "next"|||<p>direction of the element. &quot;start&quot; and &quot;end&quot; find inside. &quot;prev&quot; and &quot;next&quot; find outside. </p>|
+|options|[FindItemOptions](FindItemOptions)|✔️|{}|<p>Options for the <code>findElement</code> method. </p>|
+
+**See**:
+- [direction's example](/docs/examples/Methods) page for detailed information
+<p align="center">
+ <img src="https://naver.github.io/egjs-conveyer/img/scrollIntoView1.png" height="200" />
+</p>
+<p align="center">
+  <img src="https://naver.github.io/egjs-conveyer/img/scrollIntoView2.png" height="210" />
+</p>
+
+### findItem {#findItem}
+
+<div>
+
+</div>
+
+<p>Finds an item for an element or its direction.</p>
+
+**Returns**: [ConveyerItem](ConveyerItem) \| null
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|target|HTMLElement \| "start" \| "end" \| "prev" \| "next"|||<p>direction of the element. &quot;start&quot; and &quot;end&quot; find inside. &quot;prev&quot; and &quot;next&quot; find outside. </p>|
+|options|[FindItemOptions](FindItemOptions)|✔️|{}|<p>Options for the <code>findItem</code> method. </p>|
+
+**See**:
+- [direction's example](/docs/examples/Methods) page for detailed information
+<p align="center">
+ <img src="https://naver.github.io/egjs-conveyer/img/scrollIntoView1.png" height="200" />
+</p>
+<p align="center">
+  <img src="https://naver.github.io/egjs-conveyer/img/scrollIntoView2.png" height="210" />
+</p>
+
+### scrollIntoView {#scrollIntoView}
+
+<div>
+
+</div>
+
+<p>Scrolls an element or an item in that direction into the view.</p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|target|HTMLElement \| "start" \| "end" \| "prev" \| "next"|||<p>direction of the element. &quot;start&quot; and &quot;end&quot; find inside. &quot;prev&quot; and &quot;next&quot; find outside. </p>|
+|options|[ScrollIntoViewOptions](ScrollIntoViewOptions)|✔️|{}|<p>Options for the <code>scrollIntoView</code> method. </p>|
+
+**See**:
+- [target's example](/docs/examples/Methods) page for detailed information
+<p align="center">
+ <img src="https://naver.github.io/egjs-conveyer/img/scrollIntoView1.png" height="200" />
+</p>
+<p align="center">
+  <img src="https://naver.github.io/egjs-conveyer/img/scrollIntoView2.png" height="210" />
+</p>
+
+### scrollBy {#scrollBy}
+
+<div>
+
+</div>
+
+<p>Scrolls by the given position amount.</p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|pos|number|||<p>Amount of position to scroll by. </p>|
+|duration||✔️|0|<p>Duration to scroll by that position. </p>|
+
+### scrollTo {#scrollTo}
+
+<div>
+
+</div>
+
+<p>Scroll to the given position.</p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|pos|number|||<p>Amount of position to scroll to. </p>|
+|duration||✔️|0|<p>Duration to scroll to that position. </p>|
+
+### setItems {#setItems}
+
+<div>
+
+</div>
+
+<p>Set the items directly to the Conveyer.</p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|items|[ConveyerItem](ConveyerItem)[]|||<p>Items to set on Conveyer </p>|
+
+### updateItems {#updateItems}
+
+<div>
+
+</div>
+
+<p>Update the position and size information of items.</p>
+
+### updateContainer {#updateContainer}
+
+<div>
+
+</div>
+
+<p>Update container size and scroll size.</p>
+
+### update {#update}
+
+<div>
+
+</div>
+
+<p>Updating containers and items.</p>
+
+### init {#init}
+
+<div>
+
+</div>
+
+<p>If you use the autoInit option as false, you can initialize it directly through the init method.</p>
+
+### destroy {#destroy}
+
+<div>
+
+</div>
+
+<p>Releases the instnace and events.</p>
+
+### trigger {#trigger}
+
+<div>
+  <span className="badge badge--danger">inherited</span>
+</div>
+
+<p>Trigger a custom event.</p>
+
+**Returns**: this
+- <p>An instance of the component itself</p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|event|string \| ComponentEvent|||<p>The name of the custom event to be triggered or an instance of the ComponentEvent</p>|
+|params|Array&lt;any&gt; \| $ts:...|||<p>Event data to be sent when triggering a custom event </p>|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  beforeHi: ComponentEvent<{ foo: number; bar: string }>;
+  hi: { foo: { a: number; b: boolean } };
+  someEvent: (foo: number, bar: string) => void;
+  someOtherEvent: void; // When there's no event argument
+}> {
+  some(){
+    if(this.trigger("beforeHi")){ // When event call to stop return false.
+      this.trigger("hi");// fire hi event.
+    }
+  }
+}
+
+const some = new Some();
+some.on("beforeHi", e => {
+  if(condition){
+    e.stop(); // When event call to stop, `hi` event not call.
+  }
+  // `currentTarget` is component instance.
+  console.log(some === e.currentTarget); // true
+
+  typeof e.foo; // number
+  typeof e.bar; // string
+});
+some.on("hi", e => {
+  typeof e.foo.b; // boolean
+});
+// If you want to more know event design. You can see article.
+// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F
+```
+
+### once {#once}
+
+<div>
+  <span className="badge badge--danger">inherited</span>
+</div>
+
+<p>Executed event just one time.</p>
+
+**Returns**: this
+- <p>An instance of the component itself</p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string \| $ts:...|||<p>The name of the event to be attached or an event name - event handler mapped object.</p>|
+|handlerToAttach|function \| $ts:...|✔️||<p>The handler function of the event to be attached </p>|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  hi: ComponentEvent;
+}> {
+  hi() {
+    alert("hi");
+  }
+  thing() {
+    this.once("hi", this.hi);
+  }
+}
+
+var some = new Some();
+some.thing();
+some.trigger(new ComponentEvent("hi"));
+// fire alert("hi");
+some.trigger(new ComponentEvent("hi"));
+// Nothing happens
+```
+
+### hasOn {#hasOn}
+
+<div>
+  <span className="badge badge--danger">inherited</span>
+</div>
+
+<p>Checks whether an event has been attached to a component.</p>
+
+**Returns**: boolean
+- <p>Indicates whether the event is attached. </p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string|||<p>The name of the event to be attached </p>|
+
+```ts
+import Component from "@egjs/component";
+
+class Some extends Component<{
+  hi: void;
+}> {
+  some() {
+    this.hasOn("hi");// check hi event.
+  }
+}
+```
+
+### on {#on}
+
+<div>
+  <span className="badge badge--danger">inherited</span>
+</div>
+
+<p>Attaches an event to a component.</p>
+
+**Returns**: this
+- <p>An instance of a component itself</p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string \| $ts:...|||<p>The name of the event to be attached or an event name - event handler mapped object.</p>|
+|handlerToAttach|function \| $ts:...|✔️||<p>The handler function of the event to be attached </p>|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  hi: void;
+}> {
+  hi() {
+    console.log("hi");
+  }
+  some() {
+    this.on("hi",this.hi); //attach event
+  }
+}
+```
+
+### off {#off}
+
+<div>
+  <span className="badge badge--danger">inherited</span>
+</div>
+
+<p>Detaches an event from the component.<br/>If the <code>eventName</code> is not given this will detach all event handlers attached.<br/>If the <code>handlerToDetach</code> is not given, this will detach all event handlers for <code>eventName</code>.</p>
+
+**Returns**: this
+- <p>An instance of a component itself </p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string \| $ts:...|✔️||<p>The name of the event to be detached </p>|
+|handlerToDetach|function \| $ts:...|✔️||<p>The handler function of the event to be detached </p>|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  hi: void;
+}> {
+  hi() {
+    console.log("hi");
+  }
+  some() {
+    this.off("hi",this.hi); //detach event
+  }
+}
+```
+
+## Events
+### reachStart {#event-reachStart}
+
+<div>
+
+</div>
+
+<p>This event is fired when scroll reach start.</p>
+
+### leaveStart {#event-leaveStart}
+
+<div>
+
+</div>
+
+<p>This event is fired when scroll leave start.</p>
+
+### reachEnd {#event-reachEnd}
+
+<div>
+
+</div>
+
+<p>This event is fired when scroll reach end.</p>
+
+### leaveEnd {#event-leaveEnd}
+
+<div>
+
+</div>
+
+<p>This event is fired when scroll leave end.</p>
+
+### beginScroll {#event-beginScroll}
+
+<div>
+
+</div>
+
+<p>This event is fired when begin scroll.</p>
+
+### finishScroll {#event-finishScroll}
+
+<div>
+
+</div>
+
+<p>This event is fired when finish scroll.</p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|e|[OnFinishScroll](OnFinishScroll)|||<p>The object of data to be sent to an event </p>|
+
diff --git a/packages/docs/versioned_docs/version-1.6.1/api/ConveyerItem.mdx b/packages/docs/versioned_docs/version-1.6.1/api/ConveyerItem.mdx
new file mode 100644
index 00000000..f05ae4fb
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/api/ConveyerItem.mdx
@@ -0,0 +1,16 @@
+---
+custom_edit_url: null
+---
+
+<div>
+
+</div>
+
+**Type**: TSInterface
+
+|PROPERTY|TYPE|DESCRIPTION|
+|:---:|:---:|:---:|
+|element|HTMLElement \| null||
+|pos|number||
+|size|number||
+
diff --git a/packages/docs/versioned_docs/version-1.6.1/api/ConveyerOptions.mdx b/packages/docs/versioned_docs/version-1.6.1/api/ConveyerOptions.mdx
new file mode 100644
index 00000000..b5001cad
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/api/ConveyerOptions.mdx
@@ -0,0 +1,24 @@
+---
+custom_edit_url: null
+---
+
+<div>
+
+</div>
+
+**Type**: TSInterface
+
+|PROPERTY|TYPE|DESCRIPTION|
+|:---:|:---:|:---:|
+|horizontal|boolean|<p>scroll direction. (true: Horizontal Scroll, false: Vertical Scroll)  (default: true) </p>|
+|itemSelector|string|<p>selector to find items inside. (default: &quot;&quot;) </p>|
+|useDrag|boolean|<p>Whether to use drag (default: true) </p>|
+|useSideWheel|boolean|<p>Whether to use the mouse wheel in a direction aside from the scroll direction (default: false) </p>|
+|boundaryMargin|number|<p>The minimum margin space for [reachStart](Conveyer#event-reachStart), [leaveStart](Conveyer#event-leaveStart), [reachEnd](Conveyer#event-reachEnd), and [leaveEnd](Conveyer#event-leaveEnd) events to be triggered at the beginning and end of the scroll area. (default: 0)<br /></p>|
+|scrollDebounce|number|<p>The maximum amount of time the scroll event does not fire for the finishScroll event to be triggered. (default: 100) </p>|
+|preventDefault|boolean|<p>Whether to prevent being selected. (default: true) </p>|
+|preventClickOnDrag|boolean|<p>Whether to prevent click event when dragging. (default: false) </p>|
+|preventDefaultOnDrag|boolean|<p>Whether to use the [preventDefault](https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault) when the user starts dragging </p>|
+|autoInit|boolean|<p>Whether to automatically initialize when an instance is created. If set to false, initialization is possible while calling the init method. (default: true) </p>|
+|nested|boolean|<p>If this option is enabled on a Conveyer placed inside an egjs component that has the same scroll direction including the Conveyer itself. The parent component moves in the same direction after the Conveyer reaches the first/last scroll position. </p>|
+
diff --git a/packages/docs/versioned_docs/version-1.6.1/api/FindItemOptions.mdx b/packages/docs/versioned_docs/version-1.6.1/api/FindItemOptions.mdx
new file mode 100644
index 00000000..7c3552ea
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/api/FindItemOptions.mdx
@@ -0,0 +1,16 @@
+---
+custom_edit_url: null
+---
+
+<div>
+
+</div>
+
+**Type**: TSInterface
+
+|PROPERTY|TYPE|DESCRIPTION|
+|:---:|:---:|:---:|
+|hitTest|number||
+|intersection|boolean||
+|sibling|number||
+
diff --git a/packages/docs/versioned_docs/version-1.6.1/api/IS_IE.mdx b/packages/docs/versioned_docs/version-1.6.1/api/IS_IE.mdx
new file mode 100644
index 00000000..1df2a933
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/api/IS_IE.mdx
@@ -0,0 +1,14 @@
+---
+custom_edit_url: null
+---
+
+```ts
+const IS_IE
+```
+
+<div>
+
+</div>
+
+<p>egjs-conveyer<br />Copyright (c) 2022-present NAVER Corp.<br />MIT license</p>
+
diff --git a/packages/docs/versioned_docs/version-1.6.1/api/OnFinishScroll.mdx b/packages/docs/versioned_docs/version-1.6.1/api/OnFinishScroll.mdx
new file mode 100644
index 00000000..43cbcda8
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/api/OnFinishScroll.mdx
@@ -0,0 +1,17 @@
+---
+custom_edit_url: null
+---
+
+<div>
+
+</div>
+
+**Type**: TSInterface
+
+|PROPERTY|TYPE|DESCRIPTION|
+|:---:|:---:|:---:|
+|isWheelScroll|boolean||
+|isDragScroll|boolean||
+|isAnimationScroll|boolean||
+|isTrusted|boolean||
+
diff --git a/packages/docs/versioned_docs/version-1.6.1/api/ScrollIntoViewOptions.mdx b/packages/docs/versioned_docs/version-1.6.1/api/ScrollIntoViewOptions.mdx
new file mode 100644
index 00000000..cc0fd15d
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/api/ScrollIntoViewOptions.mdx
@@ -0,0 +1,20 @@
+---
+custom_edit_url: null
+---
+
+<div>
+
+</div>
+
+**Type**: TSInterface
+
+|PROPERTY|TYPE|DESCRIPTION|
+|:---:|:---:|:---:|
+|hitTest|number||
+|intersection|boolean||
+|sibling|number||
+|align|"start" \| "end" \| "center"|<p>Where to arrange the items in the container. (default: &quot;start&quot;) </p>|
+|excludeStand|boolean|<p>Whether to find the next item except sorting it in place. (default: false) </p>|
+|offset|number|<p>The value to scroll further from the sort position. (default: 0) </p>|
+|duration|number|<p>How long to scroll animation time. (default: 0) </p>|
+
diff --git a/packages/docs/versioned_docs/version-1.6.1/api/isString.mdx b/packages/docs/versioned_docs/version-1.6.1/api/isString.mdx
new file mode 100644
index 00000000..545c9dfb
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/api/isString.mdx
@@ -0,0 +1,20 @@
+---
+custom_edit_url: null
+---
+
+```ts
+function isString(val: any)
+```
+
+<div>
+
+</div>
+
+<p>egjs-conveyer<br />Copyright (c) 2022-present NAVER Corp.<br />MIT license</p>
+
+**Returns**: val is string
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|val|any||||
+
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/ConveyerCodeTabs.tsx b/packages/docs/versioned_docs/version-1.6.1/codes/ConveyerCodeTabs.tsx
new file mode 100644
index 00000000..0dcc99b3
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/ConveyerCodeTabs.tsx
@@ -0,0 +1,72 @@
+/* eslint-disable @typescript-eslint/quotes */
+/* eslint-disable @typescript-eslint/indent */
+import React from "react";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+
+export function convertVue2(text: string) {
+  return text.replace("vue-conveyer", "vue2-conveyer").replace("vue3-infinitegrid", "vue-infinitegrid");
+}
+export default (props: {
+  folder: string,
+  reactCode: string,
+}) => {
+  const htmlCode = require(`!!raw-loader!./${props.folder}/html.txt`).default;
+  const jsCode = require(`!!raw-loader!./${props.folder}/js.txt`).default;
+  const reactCode = props.reactCode;
+  const vueCode = require(`!!raw-loader!./${props.folder}/vue.txt`).default;
+  const vue2Code = convertVue2(vueCode);
+  const angularHTMLCode = require(`!!raw-loader!./${props.folder}/angularHTML.txt`).default;
+  const angularComponentCode = require(`!!raw-loader!./${props.folder}/angularComponent.txt`).default;
+  const svelteCode = require(`!!raw-loader!./${props.folder}/svelte.txt`).default;
+
+  return <Tabs
+    groupId="cfc"
+    defaultValue="js"
+    values={[
+      { label: "JavaScript", value: "js" },
+      { label: "React", value: "react" },
+      { label: "Vue@2", value: "vue2" },
+      { label: "Vue@3", value: "vue" },
+      { label: "Angular", value: "angular" },
+      { label: "Svelte", value: "svelte" },
+    ]}>
+    <TabItem value="js">
+      <CodeBlock className="language-html">
+        {htmlCode}
+      </CodeBlock>
+      <CodeBlock className="language-js">
+        {jsCode}
+      </CodeBlock>
+    </TabItem>
+    <TabItem value="react">
+      <CodeBlock className="language-jsx">
+        {reactCode}
+      </CodeBlock>
+    </TabItem>
+    <TabItem value="vue2">
+      <CodeBlock className="language-html">
+        {vue2Code}
+      </CodeBlock>
+    </TabItem>
+    <TabItem value="vue">
+      <CodeBlock className="language-html">
+        {vueCode}
+      </CodeBlock>
+    </TabItem>
+    <TabItem value="angular">
+      <CodeBlock className="language-html">
+        {angularHTMLCode}
+      </CodeBlock>
+      {angularComponentCode && <CodeBlock className="language-ts">
+        {angularComponentCode}
+      </CodeBlock>}
+    </TabItem>
+    <TabItem value="svelte">
+      <CodeBlock className="language-html">
+        {svelteCode}
+      </CodeBlock>
+    </TabItem>
+  </Tabs>;
+};
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/angularComponent.txt b/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/angularComponent.txt
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/angularHTML.txt b/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/angularHTML.txt
new file mode 100644
index 00000000..6cf42af2
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/angularHTML.txt
@@ -0,0 +1,14 @@
+<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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/html.txt b/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/html.txt
new file mode 100644
index 00000000..a44ed380
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/html.txt
@@ -0,0 +1,14 @@
+<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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/js.txt b/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/js.txt
new file mode 100644
index 00000000..cb29e158
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/js.txt
@@ -0,0 +1,3 @@
+import Conveyer from "@egjs/conveyer";
+
+const conveyer = new Conveyer(".items");
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/svelte.txt b/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/svelte.txt
new file mode 100644
index 00000000..2c7a7fab
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/svelte.txt
@@ -0,0 +1,21 @@
+<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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/vue.txt b/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/vue.txt
new file mode 100644
index 00000000..475a89c7
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/HorizontalScroll/vue.txt
@@ -0,0 +1,29 @@
+<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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/angularComponent.txt b/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/angularComponent.txt
new file mode 100644
index 00000000..ba5b0696
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/angularComponent.txt
@@ -0,0 +1,62 @@
+import { Component, ViewChild } from '@angular/core';
+import { NgxInfiniteGridComponent } from '@egjs/ngx-infinitegrid';
+import { OnRequestAppend, OnRenderComplete } from '@egjs/infinitegrid';
+import { NgxConveyerDirective } from '@egjs/ngx-conveyer';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: [
+    "./app.component.css",
+  ],
+})
+export class AppComponent {
+  @ViewChild('ig', { static: false }) ig!: NgxInfiniteGridComponent;
+  @ViewChild('conveyer', { static: false }) conveyer!: NgxConveyerDirective;
+  items = this.getItems(0, 10);
+  getItems(nextGroupKey: number, count: number) {
+    const nextItems = [];
+    const nextKey = nextGroupKey * count;
+
+    for (let i = i; i < count; ++i) {
+      nextItems.push({ groupKey: nextGroupKey, key: nextKey + i });
+    }
+    return nextItems;
+  }
+  groupBy(_: any, item: any) {
+    return item.groupKey;
+  }
+  trackBy(_: any, item: any) {
+    return item.key;
+  }
+  onRequestAppend(e: OnRequestAppend) {
+    const nextGroupKey = (+e.groupKey! || 0) + 1;
+
+    this.items = [
+      ...this.items,
+      ...this.getItems(nextGroupKey, 10),
+    ];
+  }
+  onRenderComplete(e: OnRenderComplete) {
+    this.conveyer.setItems(e.currentTarget.getItems().map((item) => ({
+      element: item.element,
+      pos: item.computedContentPos,
+      size: item.contentSize,
+    })));
+    this.conveyer.updateContainer();
+  }
+  prev() {
+    this.conveyer.scrollIntoView("start", {
+      align: "end",
+      duration: 500,
+      excludeStand: true,
+    });
+  }
+  next() {
+    this.conveyer.scrollIntoView("end", {
+      align: "start",
+      duration: 500,
+      excludeStand: true,
+    });
+  }
+}
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/angularHTML.txt b/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/angularHTML.txt
new file mode 100644
index 00000000..8c4e5b9f
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/angularHTML.txt
@@ -0,0 +1,30 @@
+<div class="examples">
+  <div class="buttons">
+    <button class="prev" [disabled]="conveyer?.isReachStart" (click)="prev()">
+      prev
+    </button>
+    <button class="next" [disabled]="conveyer?.isReachEnd" (click)="next()">
+      next
+    </button>
+  </div>
+  <div
+    NgxMasonryInfiniteGrid
+    class="items"
+    [gap]="5"
+    [align]="'justify'"
+    [items]="items"
+    [trackBy]="trackBy"
+    [groupBy]="groupBy"
+    (requestAppend)="onRequestAppend($event)"
+    (renderComplete)="onRenderComplete($event)"
+    [horizontal]="false"
+    [container]="true"
+    [ngxConveyer]="{ horizontal: false }"
+    #conveyer="ngxConveyer"
+    #ig
+  >
+    <div class="item" *ngFor="let item of ig.visibleItems; trackBy: trackBy;">
+      {{item.key}}
+    </div>
+  </div>
+</div>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/html.txt b/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/html.txt
new file mode 100644
index 00000000..962e6c9d
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/html.txt
@@ -0,0 +1,7 @@
+<div class="examples">
+  <div class="buttons">
+    <button class="prev">prev</button>
+    <button class="next">next</button>
+  </div>
+  <div class="items"></div>
+</div>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/js.txt b/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/js.txt
new file mode 100644
index 00000000..89748721
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/js.txt
@@ -0,0 +1,62 @@
+import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
+import Conveyer from "@egjs/conveyer";
+
+const grid = new MasonryInfiniteGrid(".items", {
+  container: true,
+  gap: 5,
+  autoInit: false,
+});
+
+grid.on("renderComplete", () => {
+  // conveyer.updateItems();
+  conveyer.setItems(grid.getItems().map((item) => ({
+    element: item.element,
+    pos: item.cssContentPos || item.contentPos,
+    size: item.contentSize,
+  })));
+  conveyer.updateContainer();
+});
+let i = 0;
+grid.on("requestAppend", () => {
+  ++i;
+  grid.append(`<div class="item">${i}</div>`)
+});
+
+const conveyer = new Conveyer(".items", {
+  preventClickOnDrag: true,
+  horizontal: false,
+  itemSelector: ".item",
+});
+
+const prev = document.querySelector(".prev");
+const next = document.querySelector(".next");
+
+// subscribe reactive properties
+conveyer.subscribe("isReachStart", (isReachStart) => {
+  prev.disabled = isReachStart;
+});
+
+conveyer.subscribe("isReachEnd", (isReachEnd) => {
+  next.disabled = isReachEnd;
+});
+
+// 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,
+  });
+});
+
+grid.renderItems();
+conveyer.init();
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/svelte.txt b/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/svelte.txt
new file mode 100644
index 00000000..65876b3d
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/svelte.txt
@@ -0,0 +1,79 @@
+<script>
+  import { MasonryInfiniteGrid } from "@egjs/svelte-infinitegrid";
+  import { useConveyer } from "@egjs/svelte-conveyer";
+  import { onMount } from "svelte";
+
+  let ig;
+  let items = getItems(0, 10);
+
+  function getItems(nextGroupKey, count) {
+    const nextItems = [];
+
+    for (let i = i; i < count; ++i) {
+      const nextKey = nextGroupKey * count + i;
+
+      nextItems.push({ groupKey: nextGroupKey, key: nextKey });
+    }
+    return nextItems;
+  }
+  const {
+    isReachStart,
+    isReachEnd,
+    setItems,
+    updateContainer,
+    scrollIntoView,
+    ref,
+    init,
+  } = useConveyer({
+    horizontal: false,
+    autoInit: false,
+  });
+  onMount(() => {
+    ref.current = ig.getScrollContainerElement();
+    init();
+  })
+</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>
+  <MasonryInfiniteGrid
+    class="items"
+    gap={5}
+    {items}
+    on:requestAppend={({ detail: e }) => {
+      const nextGroupKey = (+e.groupKey || 0) + 1;
+
+      items = [...items, ...getItems(nextGroupKey, 10)];
+    }}
+    on:renderComplete={({ detail: e }) => {
+      setItems(e.currentTarget.getItems().map((item) => ({
+        element: item.element,
+        pos: item.computedContentPos,
+        size: item.contentSize,
+      })));
+      updateContainer();
+    }}
+    bind:this={ig}
+    let:visibleItems
+  >
+    {#each visibleItems as item (item.key)}
+      <div class="item">${item.key}</div>
+    {/each}
+  </MasonryInfiniteGrid>
+</div>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/vue.txt b/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/vue.txt
new file mode 100644
index 00000000..37b382dc
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/InfiniteScroll/vue.txt
@@ -0,0 +1,94 @@
+<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>
+  <masonry-infinite-grid
+    class="items"
+    v-bind:gap="5"
+    ref="ig"
+    v-on:request-append="onRequestAppend"
+  >
+    <div
+      class="item"
+      v-for="item in items"
+      :key="item.key"
+      :data-grid-groupkey="item.groupKey"
+    >{item.key}</div>
+  </masonry-infinite-grid>
+</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, isReachStart, isReachEnd, updateContainersetItems, init } = useConveyer({
+      horizontal: false,
+    });
+
+    return {
+      ref,
+      scrollIntoView,
+      isReachStart,
+      isReachEnd,
+      updateContainer,
+      setItems,
+      init,
+    };
+  },
+  data() {
+    return {
+      items: this.getItems(0, 10),
+    };
+  },
+  mounted() {
+    this.ref.value = this.ig.getScrollContainerElement();
+    this.init();
+  }
+  methods: {
+    getItems(nextGroupKey: nextGroupKey, count: number) {
+      const nextItems: any[] = [];
+
+      for (let i = 0; i < count; ++i) {
+        const nextKey = nextGroupKey * count + i;
+
+        nextItems.push({ groupKey: groupKey, key: nextKey });
+      }
+      return nextItems;
+    },
+    onRequestAppend(e) {
+      const nextGroupKey = (+e.groupKey! || 0) + 1;
+
+      this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];
+    },
+    onRenderComplete(e) {
+      this.setItems(e.currentTarget.getItems().map((item) => ({
+        element: item.element,
+        pos: item.computedContentPos,
+        size: item.contentSize,
+      })));
+      this.updateContainer();
+    },
+    prev() {
+      this.scrollIntoView("start", {
+        align: "end",
+        duration: 500,
+        excludeStand: true,
+      });
+    },
+    next() {
+      this.scrollIntoView("end", {
+        align: "start",
+        duration: 500,
+        excludeStand: true,
+      });
+    },
+  },
+};
+</script>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/Intersection/angularComponent.txt b/packages/docs/versioned_docs/version-1.6.1/codes/Intersection/angularComponent.txt
new file mode 100644
index 00000000..80bfc2d1
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/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,
+    });
+  }
+}
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/Intersection/angularHTML.txt b/packages/docs/versioned_docs/version-1.6.1/codes/Intersection/angularHTML.txt
new file mode 100644
index 00000000..fe0cb0d0
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/Intersection/html.txt b/packages/docs/versioned_docs/version-1.6.1/codes/Intersection/html.txt
new file mode 100644
index 00000000..c50ee74f
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/Intersection/js.txt b/packages/docs/versioned_docs/version-1.6.1/codes/Intersection/js.txt
new file mode 100644
index 00000000..06cb1d55
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/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,
+  });
+});
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/Intersection/svelte.txt b/packages/docs/versioned_docs/version-1.6.1/codes/Intersection/svelte.txt
new file mode 100644
index 00000000..abf5df02
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/Intersection/vue.txt b/packages/docs/versioned_docs/version-1.6.1/codes/Intersection/vue.txt
new file mode 100644
index 00000000..924880bf
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/Methods/angularComponent.txt b/packages/docs/versioned_docs/version-1.6.1/codes/Methods/angularComponent.txt
new file mode 100644
index 00000000..4b4a3a4f
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/Methods/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,
+      excludeStand: true,
+    });
+  }
+  next() {
+    this.conveyer.scrollIntoView("end", {
+      align: "start",
+      duration: 500,
+      excludeStand: true,
+    });
+  }
+}
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/Methods/angularHTML.txt b/packages/docs/versioned_docs/version-1.6.1/codes/Methods/angularHTML.txt
new file mode 100644
index 00000000..fe0cb0d0
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/Methods/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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/Methods/html.txt b/packages/docs/versioned_docs/version-1.6.1/codes/Methods/html.txt
new file mode 100644
index 00000000..c50ee74f
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/Methods/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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/Methods/js.txt b/packages/docs/versioned_docs/version-1.6.1/codes/Methods/js.txt
new file mode 100644
index 00000000..4a030b9c
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/Methods/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,
+    excludeStand: true,
+  });
+});
+next.addEventListener("click", () => {
+  // end to start
+  conveyer.scrollIntoView("end", {
+    align: "start",
+    duration: 500,
+    excludeStand: true,
+  });
+});
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/Methods/svelte.txt b/packages/docs/versioned_docs/version-1.6.1/codes/Methods/svelte.txt
new file mode 100644
index 00000000..a806cc33
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/Methods/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,
+        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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/Methods/vue.txt b/packages/docs/versioned_docs/version-1.6.1/codes/Methods/vue.txt
new file mode 100644
index 00000000..4169d4a4
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/Methods/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,
+        excludeStand: true,
+      });
+    },
+    next() {
+      this.scrollIntoView("end", {
+        align: "start",
+        duration: 500,
+        excludeStand: true,
+      });
+    },
+  },
+};
+</script>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/angularComponent.txt b/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/angularComponent.txt
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/angularHTML.txt b/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/angularHTML.txt
new file mode 100644
index 00000000..7d1981ff
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/angularHTML.txt
@@ -0,0 +1,18 @@
+<div class="examples">
+  <div class="buttons">
+    <button class="prev" [disabled]="conveyer.isReachStart">Start</button>
+    <button class="next" [disabled]="conveyer.isReachEnd">End</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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/html.txt b/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/html.txt
new file mode 100644
index 00000000..0429afe4
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/html.txt
@@ -0,0 +1,18 @@
+<div class="examples">
+  <div class="buttons">
+    <button class="prev">Start</button>
+    <button class="next">End</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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/js.txt b/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/js.txt
new file mode 100644
index 00000000..776f06e5
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/js.txt
@@ -0,0 +1,15 @@
+import Conveyer from "@egjs/conveyer";
+
+const conveyer = new Conveyer(".items");
+
+const prev = document.querySelector(".prev");
+const next = document.querySelector(".next");
+
+// subscribe reactive properties
+conveyer.subscribe("isReachStart", (isReachStart) => {
+  prev.disabled = isReachStart;
+});
+
+conveyer.subscribe("isReachEnd", (isReachEnd) => {
+  next.disabled = isReachEnd;
+});
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/svelte.txt b/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/svelte.txt
new file mode 100644
index 00000000..7fd6d50e
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/svelte.txt
@@ -0,0 +1,27 @@
+<script>
+  import { useConveyer } from "@egjs/svelte-conveyer";
+
+  const {
+    ref,
+    isReachStart,
+    isReachEnd,
+  } = useConveyer();
+</script>
+<div class="examples">
+  <div class="buttons">
+    <button class="prev" disabled={$isReachStart}>Start</button>
+    <button class="next" disabled={$isReachEnd}>End</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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/vue.txt b/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/vue.txt
new file mode 100644
index 00000000..3e37f6b9
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/ReactiveProperties/vue.txt
@@ -0,0 +1,39 @@
+<template>
+<div class="examples">
+  <div class="buttons">
+    <button class="prev" :disabled="isReachStart">Start</button>
+    <button class="next" :disabled="isReachEnd">End</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 { useConveyer } from "@egjs/vue-conveyer";
+
+export default {
+  setup() {
+    const {
+      ref,
+      isReachStart,
+      isReachEnd,
+    } = useConveyer();
+
+    return {
+      ref,
+      isReachStart,
+      isReachEnd,
+    };
+  },
+};
+</script>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/angularComponent.txt b/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/angularComponent.txt
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/angularHTML.txt b/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/angularHTML.txt
new file mode 100644
index 00000000..6cf57507
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/angularHTML.txt
@@ -0,0 +1,14 @@
+<div class="examples">
+  <div class="items horizontal" [ngxConveyer]="{ useSideWheel: true }">
+    <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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/html.txt b/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/html.txt
new file mode 100644
index 00000000..a44ed380
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/html.txt
@@ -0,0 +1,14 @@
+<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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/js.txt b/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/js.txt
new file mode 100644
index 00000000..c0a2fa5c
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/js.txt
@@ -0,0 +1,5 @@
+import Conveyer from "@egjs/conveyer";
+
+const conveyer = new Conveyer(".items", {
+  useSideWheel: true,
+});
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/svelte.txt b/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/svelte.txt
new file mode 100644
index 00000000..5eb6886c
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/svelte.txt
@@ -0,0 +1,23 @@
+<script>
+  import { useConveyer } from "@egjs/svelte-conveyer";
+
+  const {
+    ref,
+  } = useConveyer({
+    horizontal: false,
+  });
+</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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/vue.txt b/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/vue.txt
new file mode 100644
index 00000000..3b6bdfdd
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/SideWheel/vue.txt
@@ -0,0 +1,31 @@
+<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({
+      useSideWheel: true,
+    });
+
+    return {
+      ref,
+    };
+  },
+};
+</script>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/angularComponent.txt b/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/angularComponent.txt
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/angularHTML.txt b/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/angularHTML.txt
new file mode 100644
index 00000000..9d6a98ad
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/angularHTML.txt
@@ -0,0 +1,14 @@
+<div class="examples">
+  <div class="items vertical" [ngxConveyer]="{ horizontal: false }">
+    <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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/html.txt b/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/html.txt
new file mode 100644
index 00000000..98136871
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/html.txt
@@ -0,0 +1,14 @@
+<div class="examples">
+  <div class="items vertical">
+    <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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/js.txt b/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/js.txt
new file mode 100644
index 00000000..2bfda69c
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/js.txt
@@ -0,0 +1,5 @@
+import Conveyer from "@egjs/conveyer";
+
+const conveyer = new Conveyer(".items", {
+  horizontal: false,
+});
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/svelte.txt b/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/svelte.txt
new file mode 100644
index 00000000..82bc6fd0
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/svelte.txt
@@ -0,0 +1,23 @@
+<script>
+  import { useConveyer } from "@egjs/svelte-conveyer";
+
+  const {
+    ref,
+  } = useConveyer({
+    horizontal: false,
+  });
+</script>
+<div class="examples">
+  <div class="items vertical" 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>
diff --git a/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/vue.txt b/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/vue.txt
new file mode 100644
index 00000000..1077bb31
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/codes/VerticalScroll/vue.txt
@@ -0,0 +1,31 @@
+<template>
+<div class="examples">
+  <div class="items vertical" 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({
+      horizontal: false,
+    });
+
+    return {
+      ref,
+    };
+  },
+};
+</script>
diff --git a/packages/docs/versioned_docs/version-1.6.1/examples/HorizontalScroll.mdx b/packages/docs/versioned_docs/version-1.6.1/examples/HorizontalScroll.mdx
new file mode 100644
index 00000000..4070501d
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/examples/HorizontalScroll.mdx
@@ -0,0 +1,17 @@
+---
+title: Horizontal Scroll
+custom_edit_url: null
+---
+import ConveyerCodeTabs from "@site/docs/codes/ConveyerCodeTabs";
+import HorizontalScroll from "@site/src/examples/HorizontalScroll";
+
+
+You can use drag-based scrolling with NativeScroll.
+
+
+|Property|Type|Description|
+|:---:|:---:|---|
+|[horizontal](/docs/api/ConveyerOptions)|boolean|scroll direction. (default: true)|
+
+<HorizontalScroll />
+<ConveyerCodeTabs folder="HorizontalScroll" reactCode={require("!!raw-loader!@site/src/examples/HorizontalScroll.tsx").default} />
diff --git a/packages/docs/versioned_docs/version-1.6.1/examples/InfiniteScroll.mdx b/packages/docs/versioned_docs/version-1.6.1/examples/InfiniteScroll.mdx
new file mode 100644
index 00000000..9a7c07c6
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/examples/InfiniteScroll.mdx
@@ -0,0 +1,18 @@
+---
+title: Infinite Scroll
+custom_edit_url: null
+---
+
+
+Infinite Scroll with Conveyer.
+The conveyer can be used in combination with other components.
+
+
+* The InfiniteScroll module uses [InfiniteGrid](https://github.com/naver/egjs-infinitegrid).
+* If it is combined with other components, it is difficult to get a ref. You can initialize it by setting [autoInit](/docs/api/ConveyerOptions) to false and setting the ref directly.
+
+import ConveyerCodeTabs from "@site/docs/codes/ConveyerCodeTabs";
+import InfiniteScroll from "@site/src/examples/InfiniteScroll";
+
+<InfiniteScroll />
+<ConveyerCodeTabs folder="InfiniteScroll" reactCode={require("!!raw-loader!@site/src/examples/InfiniteScroll.tsx").default} />
diff --git a/packages/docs/versioned_docs/version-1.6.1/examples/Intersection.mdx b/packages/docs/versioned_docs/version-1.6.1/examples/Intersection.mdx
new file mode 100644
index 00000000..30b7932f
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/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} />
diff --git a/packages/docs/versioned_docs/version-1.6.1/examples/Methods.mdx b/packages/docs/versioned_docs/version-1.6.1/examples/Methods.mdx
new file mode 100644
index 00000000..53335cd8
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/examples/Methods.mdx
@@ -0,0 +1,37 @@
+---
+title: Use scrollIntoView Method  (side to 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.
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|target|HTMLElement \| "start" \| "end" \| "prev" \| "next"|||<p>direction of the element. &quot;start&quot; and &quot;end&quot; find inside. &quot;prev&quot; and &quot;next&quot; find outside. </p>|
+|options|[ScrollIntoViewOptions](/docs/api/ScrollIntoViewOptions)|✔️|{}|<p>Options for the <code>scrollIntoView</code> method. </p>|
+
+
+
+import Methods from "@site/src/examples/Methods";
+import ScrollIntoViewTarget from "@site/src/examples/ScrollIntoViewTarget";
+import ConveyerCodeTabs from "@site/docs/codes/ConveyerCodeTabs";
+
+<ScrollIntoViewTarget />
+
+
+### 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).
+
+
+<Methods />
+
+
+<ConveyerCodeTabs folder="Methods" reactCode={require("!!raw-loader!@site/src/examples/Methods.tsx").default} />
diff --git a/packages/docs/versioned_docs/version-1.6.1/examples/Properties.mdx b/packages/docs/versioned_docs/version-1.6.1/examples/Properties.mdx
new file mode 100644
index 00000000..67cb2c8c
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/examples/Properties.mdx
@@ -0,0 +1,21 @@
+---
+title: Use Reactive properties
+custom_edit_url: null
+---
+
+You can change the state using properties without having to use events.
+
+|Property|Type|Description|
+|:---:|:---:|---|
+|[isReachStart](/docs/api/Conveyer#isReachStart)|boolean|Whether the scroll has reached the start.|
+|[isReachEnd](/docs/api/Conveyer#isReachEnd)|boolean|Whether the scroll has reached the end.|
+
+import ReactiveProperties from "@site/src/examples/ReactiveProperties";
+import ConveyerCodeTabs from "@site/docs/codes/ConveyerCodeTabs";
+
+### Example
+
+You can disable prev and next buttons through `isReachStart` and `isReachEnd` properties.
+
+<ReactiveProperties />
+<ConveyerCodeTabs folder="ReactiveProperties" reactCode={require("!!raw-loader!@site/src/examples/ReactiveProperties.tsx").default} />
diff --git a/packages/docs/versioned_docs/version-1.6.1/examples/SideWheel.mdx b/packages/docs/versioned_docs/version-1.6.1/examples/SideWheel.mdx
new file mode 100644
index 00000000..4be37f0d
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/examples/SideWheel.mdx
@@ -0,0 +1,21 @@
+---
+title: Using Side Wheel
+custom_edit_url: null
+---
+
+You can move conveyer by using the mouse wheel in a direction aside from the scroll direction.
+
+If the useSideWheel option is set to true, horizontal conveyer can be moved with the vertical mouse wheel and the vertical conveyer can be moved with the horizontal mouse wheel.
+
+|Property|Type|Description|
+|:---:|:---:|---|
+|[useSideWheel](/docs/api/ConveyerOptions)|boolean|Whether to use the mouse wheel in a direction aside from the scroll direction (default: false)|
+
+import ConveyerCodeTabs from "@site/docs/codes/ConveyerCodeTabs";
+import SideWheel from "@site/src/examples/SideWheel";
+
+
+
+
+<SideWheel />
+<ConveyerCodeTabs folder="SideWheel" reactCode={require("!!raw-loader!@site/src/examples/SideWheel.tsx").default} />
diff --git a/packages/docs/versioned_docs/version-1.6.1/examples/VerticalScroll.mdx b/packages/docs/versioned_docs/version-1.6.1/examples/VerticalScroll.mdx
new file mode 100644
index 00000000..d98635b0
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/examples/VerticalScroll.mdx
@@ -0,0 +1,21 @@
+---
+title: Veritcal Scroll
+custom_edit_url: null
+---
+
+You can use drag-based scrolling with NativeScroll.
+
+If the horizontal option is set to false, vertical scrolling is possible.
+
+|Property|Type|Description|
+|:---:|:---:|---|
+|[horizontal](/docs/api/ConveyerOptions)|boolean|scroll direction. (default: true)|
+
+import ConveyerCodeTabs from "@site/docs/codes/ConveyerCodeTabs";
+import VerticalScroll from "@site/src/examples/VerticalScroll";
+
+
+
+
+<VerticalScroll />
+<ConveyerCodeTabs folder="VerticalScroll" reactCode={require("!!raw-loader!@site/src/examples/VerticalScroll.tsx").default} />
diff --git a/packages/docs/versioned_docs/version-1.6.1/installation.mdx b/packages/docs/versioned_docs/version-1.6.1/installation.mdx
new file mode 100644
index 00000000..fab17e81
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/installation.mdx
@@ -0,0 +1,134 @@
+---
+title: Installation
+id: installation
+slug: /
+custom_edit_url: null
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+## Using the package managers (recommended)
+You can easily install @egjs/Conveyer with package managers like [npm](https://www.npmjs.com/) or [yarn](https://classic.yarnpkg.com/en/)
+
+### npm
+
+<Tabs
+  groupId="cfc"
+  defaultValue="js"
+  values={[
+    { label: "JavaScript", value: "js" },
+    { label: "React", value: "react" },
+    { label: "Vue@3", value: "vue" },
+    { label: "Vue@2", value: "vue2" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" }
+  ]}>
+  <TabItem value="js">
+
+```shell
+npm install @egjs/conveyer
+```
+
+  </TabItem>
+  <TabItem value="react">
+
+```shell
+npm install @egjs/react-conveyer
+```
+
+  </TabItem>
+  <TabItem value="vue">
+
+```shell
+npm install @egjs/vue-conveyer
+```
+
+  </TabItem>
+  <TabItem value="vue2">
+
+```shell
+npm install @egjs/vue2-conveyer
+```
+
+  </TabItem>
+  <TabItem value="angular">
+
+```shell
+npm install @egjs/ngx-conveyer
+```
+
+  </TabItem>
+  <TabItem value="svelte">
+
+```shell
+npm install @egjs/svelte-conveyer
+```
+
+  </TabItem>
+</Tabs>
+
+### yarn
+<Tabs
+  groupId="cfc"
+  defaultValue="js"
+  values={[
+    { label: "JavaScript", value: "js" },
+    { label: "React", value: "react" },
+    { label: "Vue@3", value: "vue" },
+    { label: "Vue@2", value: "vue2" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" }
+  ]}>
+  <TabItem value="js">
+
+```shell
+yarn add @egjs/conveyer
+```
+
+  </TabItem>
+  <TabItem value="react">
+
+```shell
+yarn add @egjs/react-conveyer
+```
+
+  </TabItem>
+  <TabItem value="vue">
+
+```shell
+yarn add @egjs/vue-conveyer
+```
+
+  </TabItem>
+  <TabItem value="vue2">
+
+```shell
+yarn add @egjs/vue2-conveyer
+```
+
+  </TabItem>
+  <TabItem value="angular">
+
+```shell
+yarn add @egjs/ngx-conveyer
+```
+
+  </TabItem>
+  <TabItem value="svelte">
+
+```shell
+yarn add @egjs/svelte-conveyer
+```
+
+  </TabItem>
+</Tabs>
+
+## CDN Links
+### packaged(with dependencies)
+```html
+<!-- github -->
+<script src="https://naver.github.io/egjs-conveyer/release/latest/dist/conveyer.min.js" crossorigin="anonymous"></script>
+<!-- unpkg -->
+<script src="https://unpkg.com/conveyer/dist/conveyer.min.js" crossorigin="anonymous"></script>
+```
diff --git a/packages/docs/versioned_docs/version-1.6.1/listen-to-events.mdx b/packages/docs/versioned_docs/version-1.6.1/listen-to-events.mdx
new file mode 100644
index 00000000..b5de805f
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/listen-to-events.mdx
@@ -0,0 +1,325 @@
+---
+title: Listen to Events
+id: listen-to-events
+slug: /listen-to-events
+custom_edit_url: null
+---
+
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Conveyer has scroll related [events](api/Conveyer#events).
+
+You can refer to the documentation and use it according to each framework.
+
+<Tabs
+  groupId="cfc"
+  defaultValue="js"
+  values={[
+    { label: "JavaScript", value: "js" },
+    { label: "React", value: "react" },
+    { label: "Vue@2", value: "vue2" },
+    { label: "Vue@3", value: "vue" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" }
+  ]}>
+  <TabItem value="js">
+
+You can listen to Conveyer's events with [Conveyer#on](api/Conveyer#on)
+
+Since events occur during initialization, set [autoInit](api/ConveyerOptions) to false if you want to register events.
+
+```js
+import Conveyer from "@egjs/conveyer";
+
+const conveyer = new Conveyer(".items", {
+  autoInit: false,
+});
+
+conveyer.on("scrollStart", evt => {
+  console.log(evt);
+});
+
+conveyer.init();
+```
+
+  </TabItem>
+  <TabItem value="react">
+
+You can use events of Conveyer by getting a result of `useConveyer`.
+
+All events are prefixed with `on-`, and `camelCase`d.
+
+```jsx
+import * as React from "react";
+import { useConveyer } from "@egjs/react-conveyer";
+
+export default () => {
+  const ref = useRef();
+  const {
+    scrollIntoView,
+    onBeginScroll,
+  } = useConveyer(ref);
+
+  onBeginScroll(() => {
+    console.log("begin scroll");
+  }, []);
+
+  return <div className="container">
+    <div className="buttons">
+      <button className="prev" onClick={() => {
+        // start to end
+        scrollIntoView("start", {
+          align: "end",
+          duration: 500,
+        });
+      }}>Prev</button>
+      <button className="next" onClick={() => {
+        // end to start
+        scrollIntoView("end", {
+          align: "start",
+          duration: 500,
+        });
+      }}>Next</button>
+    </div>
+    <div className="items" ref={ref}>
+      <div className="item">1</div>
+      <div className="item">2</div>
+      <div className="item">3</div>
+    </div>
+  </div>;
+};
+```
+
+See [React Refs and the DOM](https://reactjs.org/docs/refs-and-the-dom.html) for more info.
+
+  </TabItem>
+  <TabItem value="vue">
+
+You can use events of Conveyer by getting a result of `useConveyer`.
+
+All events are prefixed with `on-`, and `camelCase`d.
+
+```html title="<template>"
+<div class="items" ref="ref">
+  <button id="prev" @click="prev">prev</button>
+  <button id="next" @click="next">next</button>
+  <div class="items" ref="ref">
+    <div class="item"><a href="#1">1</a></div>
+    <div class="item"><a href="#2">2</a></div>
+    <div class="item"><a href="#3">3</a></div>
+  </div>
+</div>
+```
+
+```js title="<script>"
+import { useConveyer } from "@egjs/vue-conveyer";
+
+export default {
+  setup() {
+    const {
+      ref,
+      scrollIntoView,
+      // events
+      onBeginScroll,
+    } = useConveyer({
+      horizontal: false,
+    });
+
+    onBeginScroll(() => {
+      console.log("begin scroll");
+    });
+
+    return {
+      ref,
+      scrollIntoView,
+  };
+  },
+  methods: {
+    prev() {
+      this.scrollIntoView("start", {
+        align: "end",
+        duration: 500,
+      });
+    },
+    next() {
+      this.scrollIntoView("end", {
+        align: "start",
+        duration: 500,
+      });
+    },
+  },
+};
+```
+  </TabItem>
+  <TabItem value="vue2">
+
+You can call methods of Conveyer by getting a result of `useConveyer`.
+
+All events are prefixed with `on-`, and `camelCase`d.
+
+```html title="<template>"
+<div class="items" ref="ref">
+  <button id="prev" @click="prev">prev</button>
+  <button id="next" @click="next">next</button>
+  <div class="items" ref="ref">
+    <div class="item"><a href="#1">1</a></div>
+    <div class="item"><a href="#2">2</a></div>
+    <div class="item"><a href="#3">3</a></div>
+  </div>
+</div>
+```
+
+```js title="<script>"
+import { useConveyer } from "@egjs/vue2-conveyer";
+
+export default {
+  setup() {
+    const {
+      ref,
+      scrollIntoView,
+      // events
+      onBeginScroll,
+    } = useConveyer({
+      horizontal: false,
+    });
+
+    onBeginScroll(() => {
+      console.log("begin scroll");
+    });
+
+    return {
+      ref,
+      scrollIntoView,
+  };
+  },
+  methods: {
+    prev() {
+      this.scrollIntoView("start", {
+        align: "end",
+        duration: 500,
+      });
+    },
+    next() {
+      this.scrollIntoView("end", {
+        align: "start",
+        duration: 500,
+      });
+    },
+  },
+};
+```
+  </TabItem>
+  <TabItem value="angular">
+
+There're few ways to interact with child component in Angular.
+See [Component Interaction](https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable) page from Angular official document, and use that to interact with Conveyer.
+
+You can listen events of the `ngx-conveyer` using Angular's [event binding](https://angular.io/guide/event-binding).
+
+
+```html title="app.component.html"
+<div class="container">
+  <button id="prev" (click)="prev()">prev</button>
+  <button id="next" (click)="next()">next</button>
+  <div
+    class="items"
+    ngxConveyer
+    (beginScroll)="onBeginScroll"
+    #conveyer="ngxConveyer"
+    >
+    <div class="item"><a href="#1">1</a></div>
+    <div class="item"><a href="#2">2</a></div>
+    <div class="item"><a href="#3">3</a></div>
+    <div class="item"><a href="#4">4</a></div>
+    <div class="item"><a href="#5">5</a></div>
+    <div class="item"><a href="#6">6</a></div>
+    <div class="item"><a href="#7">7</a></div>
+    <div class="item"><a href="#8">8</a></div>
+    <div class="item"><a href="#9">9</a></div>
+    <div class="item"><a href="#10">10</a></div>
+    <div class="item"><a href="#11">11</a></div>
+    <div class="item"><a href="#12">12</a></div>
+  </div>
+</div>
+```
+
+```js title="app.component.ts"
+import { Component, Input, AfterViewInit } from '@angular/core';
+
+import { NgxConveyerDirective } from 'ngx-conveyer';
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+})
+export class AppComponent implements AfterViewInit {
+  @ViewChild("conveyer") conveyer!: NgxConveyerDirective;
+  onBeginScroll() {
+    console.log("begin scroll");
+  }
+  prev() {
+    this.conveyer.scrollIntoView("start", {
+      align: "end",
+      duration: 500,
+    });
+  }
+  next() {
+    this.conveyer.scrollIntoView("end", {
+      align: "start",
+      duration: 500,
+    });
+  }
+}
+```
+
+  </TabItem>
+  <TabItem value="svelte">
+
+All events are prefixed with `on-`, and `camelCase`d.
+
+```jsx
+<script lang="ts">
+  import { useConveyer } from "@egjs/svelte-conveyer";
+
+  const {
+    ref,
+    scrollIntoView,
+    // events
+    onBeginScroll,
+  } = useConveyer();
+
+  onBeginScroll(() => {
+    console.log("begin scroll");
+  });
+</script>
+<div class="container">
+  <div class="buttons">
+    <button class="prev" on:click={() => {
+      // start to end
+      scrollIntoView("start", {
+        align: "end",
+        duration: 500,
+      });
+    }}>Prev</button>
+    <button class="next" on:click={() => {
+      // end to start
+      scrollIntoView("end", {
+        align: "start",
+        duration: 500,
+      });
+    }}>Next</button>
+  </div>
+  <div class="items" use:ref>
+    <div class="item">1</div>
+    <div class="item">2</div>
+    <div class="item">3</div>
+  </div>
+</div>
+```
+
+  </TabItem>
+</Tabs>
+
+See all available events at <Link to={useBaseUrl("docs/api/Conveyer#events")}>Conveyer#events</Link>.
diff --git a/packages/docs/versioned_docs/version-1.6.1/quick-start.mdx b/packages/docs/versioned_docs/version-1.6.1/quick-start.mdx
new file mode 100644
index 00000000..a7180912
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/quick-start.mdx
@@ -0,0 +1,189 @@
+---
+title: Quick Start
+id: quick-start
+slug: /quick-start
+custom_edit_url: null
+---
+
+Native Scroll is the most basic and best scrolling function that a browser can support.
+Conveyer adds Drag gestures to your Native Scroll.
+
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+<Tabs
+  groupId="cfc"
+  defaultValue="js"
+  values={[
+    { label: "JavaScript", value: "js" },
+    { label: "React", value: "react" },
+    { label: "Vue@3", value: "vue" },
+    { label: "Vue@2", value: "vue2" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" }
+  ]}>
+  <TabItem value="js">
+
+Add the script/CSS to the page.
+```html
+<!-- https://naver.github.io/egjs-conveyer/release/latest/dist/conveyer.min.js -->
+<script src="https://unpkg.com/conveyer/dist/conveyer.min.js" crossorigin="anonymous"></script>
+```
+
+Or, you can rather import them if you're using a bundler like [webpack](https://webpack.js.org/) or [rollup](https://rollupjs.org/guide/en/).
+```js
+import Conveyer from "@egjs/conveyer";
+```
+
+Then, add some basic HTML layout of Conveyer to your page.
+
+```html
+<div class="items">
+  <div class="item">1</div>
+  <div class="item">2</div>
+  <div class="item">3</div>
+</div>
+```
+Then initialize Conveyer instance with JavaScript after.
+
+```js
+import Conveyer from "@egjs/react-conveyer";
+
+const ig = new Conveyer(".items");
+```
+
+  </TabItem>
+  <TabItem value="react">
+
+You can import & use Conveyer as a React Component.
+
+```jsx title="SomeComponent.jsx"
+import * as React from "react";
+import { useConveyer } from "@egjs/react-conveyer";
+
+export default () => {
+  const ref = useRef();
+  useConveyer(ref);
+
+  return <div className="items" ref={ref}>
+    <div className="item">1</div>
+    <div className="item">2</div>
+    <div className="item">3</div>
+  </div>;
+}
+```
+
+  </TabItem>
+  <TabItem value="vue">
+You can import & use Conveyer as a Vue Component.
+
+```html title="<template>"
+<div class="items" ref="ref">
+  <div class="item">1</div>
+  <div class="item">2</div>
+  <div class="item">3</div>
+</div>
+```
+
+```js title="<script>"
+import { useConveyer } from "@egjs/vue-conveyer";
+
+export default {
+  setup() {
+    const { ref } = useConveyer();
+
+    return {
+      ref,
+    };
+  },
+};
+```
+
+  </TabItem>
+  <TabItem value="vue2">
+<b>@vue/composition-api</b> is required to use vue2-conveyer.
+
+```js
+import Vue from "vue";
+import VueCompositionAPI from "@vue/composition-api";
+
+Vue.use(VueCompositionAPI);
+```
+You can import & use Conveyer as a Vue Component.
+
+
+```html title="<template>"
+<div class="items" ref="ref">
+  <div class="item">1</div>
+  <div class="item">2</div>
+  <div class="item">3</div>
+</div>
+```
+
+```js title="<script>"
+import { useConveyer } from "@egjs/vue2-conveyer";
+
+export default {
+  setup() {
+    const { ref } = useConveyer();
+
+    return {
+      ref,
+    };
+  },
+};
+```
+  </TabItem>
+  <TabItem value="angular">
+
+You can add `NgxConveyerModule` at `imports` of your app module to use Conveyer.
+
+```js title="app.module.ts"
+import { NgxConveyerModule } from '@egjs/ngx-conveyer';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    NgxConveyerModule /* Add in imports */
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { } /* Your app */
+```
+
+```html title="app.component.html"
+<div class="items" [ngxConveyer]="{ horizontal: true }" #conveyer="ngxConveyer">
+  <div class="item">1</div>
+  <div class="item">2</div>
+  <div class="item">3</div>
+</div>
+```
+
+  </TabItem>
+  <TabItem value="svelte">
+
+You can import `Conveyer` from the "svelte-conveyer" package.
+
+```jsx title="App.svelte"
+<script lang="ts">
+  import { useConveyer } from "@egjs/svelte-conveyer";
+
+  const { ref } = useConveyer();
+</script>
+<div class="items" use:ref>
+  <div class="item">1</div>
+  <div class="item">2</div>
+  <div class="item">3</div>
+</div>
+```
+
+  </TabItem>
+</Tabs>
diff --git a/packages/docs/versioned_docs/version-1.6.1/subscribe-to-reactive-properties.mdx b/packages/docs/versioned_docs/version-1.6.1/subscribe-to-reactive-properties.mdx
new file mode 100644
index 00000000..4a656594
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/subscribe-to-reactive-properties.mdx
@@ -0,0 +1,186 @@
+---
+title: Subscribe to Reactive Properties
+id: subscribe-to-reactive-properties
+slug: /subscribe-to-reactive-properties
+custom_edit_url: null
+---
+
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+You can subscribe by detecting only changes in [properties](api/Conveyer#properties) instead of events.
+
+You can use reactive properties as a hook.
+
+<Tabs
+  groupId="cfc"
+  defaultValue="js"
+  values={[
+    { label: "JavaScript", value: "js" },
+    { label: "React", value: "react" },
+    { label: "Vue@2", value: "vue2" },
+    { label: "Vue@3", value: "vue" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" }
+  ]}>
+  <TabItem value="js">
+
+```js
+conveyer.subscribe("isReachStart", value => {
+  console.log(value);
+});
+```
+
+  </TabItem>
+  <TabItem value="react">
+
+```jsx
+import * as React from "react";
+import { useConveyer } from "@egjs/react-conveyer";
+
+export default () => {
+  const ref = useRef();
+  const { isReachStart, isReachEnd } = useConveyer(ref);
+
+  return <div className="container">
+    <div className="buttons">
+      <button className="prev" disabled={isReachStart}>Prev</button>
+      <button className="next" disabled={isReachEnd}>Next</button>
+    </div>
+    <div className="items" ref={ref}>
+      <div className="item">1</div>
+      <div className="item">2</div>
+      <div className="item">3</div>
+    </div>
+  </div>;
+};
+```
+  </TabItem>
+  <TabItem value="vue">
+
+```html title="<template>"
+<div class="container">
+  <button id="prev" :disabled="isReachStart">prev</button>
+  <button id="next" :disabled="isReachEnd">next</button>
+  <div class="items" ref="ref">
+    <div class="item"><a href="#1">1</a></div>
+    <div class="item"><a href="#2">2</a></div>
+    <div class="item"><a href="#3">3</a></div>
+  </div>
+</div>
+```
+
+```js title="<script>"
+import { useConveyer } from "@egjs/vue-conveyer";
+
+export default {
+  setup() {
+      const { ref, isReachStart, isReachEnd } = useConveyer();
+      return {
+        ref,
+        scrollIntoView,
+        isReachStart,
+        isReachEnd,
+      };
+    },
+  });
+};
+```
+  </TabItem>
+  <TabItem value="vue2">
+
+```html title="<template>"
+<div class="container">
+  <button id="prev" :disabled="isReachStart">prev</button>
+  <button id="next" :disabled="isReachEnd">next</button>
+  <div class="items" ref="ref">
+    <div class="item"><a href="#1">1</a></div>
+    <div class="item"><a href="#2">2</a></div>
+    <div class="item"><a href="#3">3</a></div>
+  </div>
+</div>
+```
+
+```js title="<script>"
+import { useConveyer } from "@egjs/vue2-conveyer";
+
+export default {
+  setup() {
+      const { ref, isReachStart, isReachEnd } = useConveyer();
+      return {
+        ref,
+        scrollIntoView,
+        isReachStart,
+        isReachEnd,
+      };
+    },
+  });
+};
+```
+  </TabItem>
+  <TabItem value="angular">
+
+There're few ways to interact with child component in Angular.
+See [Component Interaction](https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable) page from Angular official document, and use that to interact with Conveyer.
+
+
+```html title="app.component.html"
+<div class="container">
+  <button id="prev" [disabled]="conveyer?.isReachStart">prev</button>
+  <button id="next" [disabled]="conveyer?.isReachEnd">next</button>
+  <div
+    class="items"
+    ngxConveyer
+    #conveyer="ngxConveyer"
+    >
+    <div class="item"><a href="#1">1</a></div>
+    <div class="item"><a href="#2">2</a></div>
+    <div class="item"><a href="#3">3</a></div>
+    <div class="item"><a href="#4">4</a></div>
+    <div class="item"><a href="#5">5</a></div>
+    <div class="item"><a href="#6">6</a></div>
+    <div class="item"><a href="#7">7</a></div>
+    <div class="item"><a href="#8">8</a></div>
+    <div class="item"><a href="#9">9</a></div>
+    <div class="item"><a href="#10">10</a></div>
+    <div class="item"><a href="#11">11</a></div>
+    <div class="item"><a href="#12">12</a></div>
+  </div>
+</div>
+```
+
+
+  </TabItem>
+  <TabItem value="svelte">
+
+You need to use $-prefix to read reactiver properties in svelte.
+
+
+https://svelte.dev/docs#component-format-script-4-prefix-stores-with-$-to-access-their-values
+
+```jsx
+<script lang="ts">
+  import { useConveyer } from "@egjs/svelte-conveyer";
+
+  const { ref, isReachStart, isReachEnd } = useConveyer();
+
+</script>
+<div class="container">
+  <div class="buttons">
+    <button class="prev" disabled={$isReachStart}>Prev</button>
+    <button class="next" disabled={$isReachEnd}>Next</button>
+  </div>
+  <div class="items" use:ref>
+    <div class="item">1</div>
+    <div class="item">2</div>
+    <div class="item">3</div>
+  </div>
+</div>
+```
+
+  </TabItem>
+</Tabs>
+
+See all available events at <Link to={useBaseUrl("docs/api/Conveyer#events")}>Conveyer#events</Link>.
diff --git a/packages/docs/versioned_docs/version-1.6.1/use-the-methods.mdx b/packages/docs/versioned_docs/version-1.6.1/use-the-methods.mdx
new file mode 100644
index 00000000..ccff389d
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.6.1/use-the-methods.mdx
@@ -0,0 +1,265 @@
+---
+title: Use the Methods
+id: use-the-methods
+slug: /use-the-methods
+custom_edit_url: null
+---
+
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+You can see Conveyer's [methods](/docs/api/Conveyer#methods).
+
+<Tabs
+  groupId="cfc"
+  defaultValue="js"
+  values={[
+    { label: "JavaScript", value: "js" },
+    { label: "React", value: "react" },
+    { label: "Vue@3", value: "vue" },
+    { label: "Vue@2", value: "vue2" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" }
+  ]}>
+  <TabItem value="js">
+
+You can call methods directly from the Conveyer instance.
+
+```js
+const conveyer = new Conveyer("#el", options);
+
+conveyer.scrollIntoView("end", { align: "start "});
+```
+
+  </TabItem>
+  <TabItem value="react">
+
+You can call methods of Conveyer by getting a result of `useConveyer`.
+
+```jsx
+import * as React from "react";
+import { useConveyer } from "@egjs/react-conveyer";
+
+export default () => {
+  const ref = useRef();
+  const { scrollIntoView } = useConveyer(ref);
+
+  return <div className="container">
+    <div className="buttons">
+      <button className="prev" onClick={() => {
+        // start to end
+        scrollIntoView("start", {
+          align: "end",
+          duration: 500,
+        });
+      }}>Prev</button>
+      <button className="next" onClick={() => {
+        // end to start
+        scrollIntoView("end", {
+          align: "start",
+          duration: 500,
+        });
+      }}>Next</button>
+    </div>
+    <div className="items" ref={ref}>
+      <div className="item">1</div>
+      <div className="item">2</div>
+      <div className="item">3</div>
+    </div>
+  </div>;
+};
+```
+
+See [React Refs and the DOM](https://reactjs.org/docs/refs-and-the-dom.html) for more info.
+
+  </TabItem>
+  <TabItem value="vue">
+
+You can call methods of Conveyer by getting a result of `useConveyer`.
+
+```html title="<template>"
+<div class="items" ref="ref">
+  <button id="prev" @click="prev">prev</button>
+  <button id="next" @click="next">next</button>
+  <div class="items" ref="ref">
+    <div class="item"><a href="#1">1</a></div>
+    <div class="item"><a href="#2">2</a></div>
+    <div class="item"><a href="#3">3</a></div>
+  </div>
+</div>
+```
+
+```js title="<script>"
+import { useConveyer } from "@egjs/vue-conveyer";
+
+export default {
+  setup() {
+    const { ref, scrollIntoView } = useConveyer({
+      horizontal: false,
+    });
+
+    return {
+      ref,
+      scrollIntoView,
+    };
+  },
+  methods: {
+    prev() {
+      this.scrollIntoView("start", {
+        align: "end",
+        duration: 500,
+      });
+    },
+    next() {
+      this.scrollIntoView("end", {
+        align: "start",
+        duration: 500,
+      });
+    },
+  },
+};
+```
+  </TabItem>
+  <TabItem value="vue2">
+
+You can call methods of Conveyer by getting a result of `useConveyer`.
+
+```html title="<template>"
+<div class="items" ref="ref">
+  <button id="prev" @click="prev">prev</button>
+  <button id="next" @click="next">next</button>
+  <div class="items" ref="ref">
+    <div class="item"><a href="#1">1</a></div>
+    <div class="item"><a href="#2">2</a></div>
+    <div class="item"><a href="#3">3</a></div>
+  </div>
+</div>
+```
+
+```js title="<script>"
+import { useConveyer } from "@egjs/vue2-conveyer";
+
+export default {
+  setup() {
+    const { ref, scrollIntoView } = useConveyer({
+      horizontal: false,
+    });
+
+    return {
+      ref,
+      scrollIntoView,
+    };
+  },
+  methods: {
+    prev() {
+      this.scrollIntoView("start", {
+        align: "end",
+        duration: 500,
+      });
+    },
+    next() {
+      this.scrollIntoView("end", {
+        align: "start",
+        duration: 500,
+      });
+    },
+  },
+};
+```
+  </TabItem>
+  <TabItem value="angular">
+
+There're few ways to interact with child component in Angular.
+See [Component Interaction](https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable) page from Angular official document, and use that to interact with Conveyer.
+
+```html title="app.component.html"
+<div class="container">
+  <button id="prev" (click)="prev()">prev</button>
+  <button id="next" (click)="next()">next</button>
+  <div
+    class="items"
+    ngxConveyer
+    #conveyer="ngxConveyer"
+    >
+    <div class="item"><a href="#1">1</a></div>
+    <div class="item"><a href="#2">2</a></div>
+    <div class="item"><a href="#3">3</a></div>
+    <div class="item"><a href="#4">4</a></div>
+    <div class="item"><a href="#5">5</a></div>
+    <div class="item"><a href="#6">6</a></div>
+    <div class="item"><a href="#7">7</a></div>
+    <div class="item"><a href="#8">8</a></div>
+    <div class="item"><a href="#9">9</a></div>
+    <div class="item"><a href="#10">10</a></div>
+    <div class="item"><a href="#11">11</a></div>
+    <div class="item"><a href="#12">12</a></div>
+  </div>
+</div>
+```
+
+```js title="app.component.ts"
+import { Component, Input, AfterViewInit } from '@angular/core';
+
+import { NgxConveyerDirective } from 'ngx-conveyer';
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+})
+export class AppComponent implements AfterViewInit {
+  @ViewChild("conveyer") conveyer!: NgxConveyerDirective;
+  prev() {
+    this.conveyer.scrollIntoView("start", {
+      align: "end",
+      duration: 500,
+    });
+  }
+  next() {
+    this.conveyer.scrollIntoView("end", {
+      align: "start",
+      duration: 500,
+    });
+  }
+}
+```
+
+  </TabItem>
+  <TabItem value="svelte">
+
+```jsx
+<script lang="ts">
+  import { useConveyer } from "@egjs/svelte-conveyer";
+
+  const { ref, scrollIntoView } = useConveyer();
+</script>
+<div class="container">
+  <div class="buttons">
+    <button class="prev" on:click={() => {
+      // start to end
+      scrollIntoView("start", {
+        align: "end",
+        duration: 500,
+      });
+    }}>Prev</button>
+    <button class="next" on:click={() => {
+      // end to start
+      scrollIntoView("end", {
+        align: "start",
+        duration: 500,
+      });
+    }}>Next</button>
+  </div>
+  <div class="items" use:ref>
+    <div class="item">1</div>
+    <div class="item">2</div>
+    <div class="item">3</div>
+  </div>
+</div>
+```
+
+  </TabItem>
+</Tabs>
+
+See all available methods at our <Link to={useBaseUrl("docs/api/Conveyer#methods")}>API</Link> page.
diff --git a/packages/docs/versioned_sidebars/version-1.6.1-sidebars.json b/packages/docs/versioned_sidebars/version-1.6.1-sidebars.json
new file mode 100644
index 00000000..994236bb
--- /dev/null
+++ b/packages/docs/versioned_sidebars/version-1.6.1-sidebars.json
@@ -0,0 +1,54 @@
+{
+  "started": [
+    "installation",
+    "quick-start",
+    "use-the-methods",
+    "listen-to-events",
+    "subscribe-to-reactive-properties"
+  ],
+  "examples": [
+    "examples/HorizontalScroll",
+    "examples/VerticalScroll",
+    "examples/Properties",
+    "examples/Methods",
+    "examples/Intersection",
+    "examples/InfiniteScroll",
+    "examples/SideWheel"
+  ],
+  "api": [
+    {
+      "type": "category",
+      "label": "Class",
+      "items": [
+        "api/Conveyer",
+        "api/Component"
+      ]
+    },
+    {
+      "type": "category",
+      "label": "Constant",
+      "items": [
+        "api/IS_IE",
+        "api/CONVEYER_METHODS"
+      ]
+    },
+    {
+      "type": "category",
+      "label": "Typedef",
+      "items": [
+        "api/ConveyerOptions",
+        "api/OnFinishScroll",
+        "api/FindItemOptions",
+        "api/ScrollIntoViewOptions",
+        "api/ConveyerItem"
+      ]
+    },
+    {
+      "type": "category",
+      "label": "Global",
+      "items": [
+        "api/isString"
+      ]
+    }
+  ]
+}
diff --git a/packages/docs/versions.json b/packages/docs/versions.json
index b00791c2..9cf53e65 100644
--- a/packages/docs/versions.json
+++ b/packages/docs/versions.json
@@ -1,4 +1,5 @@
 [
+  "1.6.1",
   "1.4.7",
   "1.3.1",
   "1.2.0",