https://www.kg-mobility.com/assets/chart-CLE5rU1Z.js

1import{a as s,c as a,I as n,_ as l,ck as o,cl as p,e,f as t,p as c,j as r,b as E}from"./index-DoQt3p0A.js";const y={class:"prose prose-sm text-left"},F=[n('<div class="md-section"><br><br><h1>옵저버 class 생성 / 스냅 스크롤 이동</h1><h3>Script</h3><pre class="shiki nord" style="background-color:#2e3440ff;" tabindex="0"><code class="language-bash"><span class="line"><span style="color:#88C0D0;">import</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">{</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">useObserverAnimation,</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">useSnapScrollSmoothMove</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">}</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">from</span><span style="color:#D8DEE9FF;"> </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">@/service/composable/ui/useCmUI</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#88C0D0;">//옵저버</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">추가</span></span>\n<span class="line"><span style="color:#88C0D0;">useObserverAnimation</span><span style="color:#ECEFF4;">()</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#88C0D0;">//스냅</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">스크롤</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">이동</span></span>\n<span class="line"><span style="color:#88C0D0;">//elementsClass</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">선택</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">요소들,</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">offsetScTop:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">스크롤</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">이동</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">위치</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">간격,</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">100</span><span style="color:#A3BE8C;">은</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">100</span><span style="color:#A3BE8C;">만큼</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">스크롤바가</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">위로</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">올라</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">간다.</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#88C0D0;">//useSnapScrollSmoothMove(</span><span style="color:#D8DEE9FF;">{elementsClass: </span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">.section</span><span style="color:#ECEFF4;">&#39;</span><span style="color:#A3BE8C;">,</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">offsetScTop:</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">100</span><span style="color:#A3BE8C;">}</span><span style="color:#D8DEE9FF;">)</span><span style="color:#81A1C1;">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#88C0D0;">const</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">{stopSmoothfnc}</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">=</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">useSnapScrollSmoothMove</span><span style="color:#ECEFF4;">(</span><span style="color:#D8DEE9FF;">{elementsClass: &#39;.section&#39;});</span></span>\n<span class="line"><span style="color:#88C0D0;">//stopSmoothfnc(3000</span><span style="color:#ECEFF4;">)</span><span style="color:#81A1C1;">;</span><span style="color:#D8DEE9FF;">  </span><span style="color:#88C0D0;">//</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">다른</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">기능에서</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">스크롤을</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">이동할때</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">잠시</span><span style="color:#ECEFF4;">(</span><span style="color:#88C0D0;">3초</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">동안</span><span style="color:#ECEFF4;">)</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">끄는</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">기능</span></span>\n<span class="line"></span>\n<span class="line"></span></code></pre></div><div class="md-section"><h3>Template</h3><pre class="shiki nord" style="background-color:#2e3440ff;" tabindex="0"><code class="language-bash"><span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#616E88;"># data-ani-obs=&quot;true&quot; :  옵저버 클래스 생성할 대상에 요소에 속성을 적용합니다.</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#616E88;"># data-class-name=&quot;active&quot; : 옵저버를 이용해 생성될 class 값을 넣습니다.</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">div&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">h1</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">container-title</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span><span style="color:#A3BE8C;">Chart</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">Guide</span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">/h</span><span style="color:#81A1C1;">1&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">Description1&gt;&lt;/Description1&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">div</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">section s1</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">data-ani-obs=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">true</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">data-class-name=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">active</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">span</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">text</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span><span style="color:#A3BE8C;">Section</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">1</span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">/spa</span><span style="color:#D8DEE9FF;">n</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/div&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">div&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">div</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">section s2</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">data-ani-obs=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">true</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">data-class-name=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">active</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">      </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">span</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">text</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span><span style="color:#A3BE8C;">Section</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">2</span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">/spa</span><span style="color:#D8DEE9FF;">n</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/div&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/div&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">div</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">

1section s3</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">data-ani-obs=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">true</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">data-class-name=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">active</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">    </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">span</span><span style="color:#D8DEE9FF;"> </span><span style="color:#A3BE8C;">class=</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#A3BE8C;">text</span><span style="color:#ECEFF4;">&quot;</span><span style="color:#81A1C1;">&gt;</span><span style="color:#A3BE8C;">Section</span><span style="color:#D8DEE9FF;"> </span><span style="color:#B48EAD;">3</span><span style="color:#81A1C1;">&lt;</span><span style="color:#A3BE8C;">/spa</span><span style="color:#D8DEE9FF;">n</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"><span style="color:#D8DEE9FF;">  </span><span style="color:#81A1C1;">&lt;</span><span style="color:#88C0D0;">/div&gt;</span></span>\n<span class="line"><span style="color:#81A1C1;">&lt;</span><span style="color:#D8DEE9FF;">/div</span><span style="color:#81A1C1;">&gt;</span></span>\n<span class="line"></span></code></pre></div>',2)],D={__name:"md1",setup:(n,{expose:l})=>(l({frontmatter:{}}),(n,l)=>(s(),a("div",y,F)))},C=(s=>(c("data-v-d6f0eeee"),s=s(),r(),s))((()=>E("h1",{class:"container-title"},"Chart Guide",-1))),A=n('<br data-v-d6f0eeee><br data-v-d6f0eeee><br data-v-d6f0eeee><br data-v-d6f0eeee><br data-v-d6f0eeee><div class="section s1" data-ani-obs="true" data-class-name="active" data-v-d6f0eeee><span class="text" data-v-d6f0eeee>Section 1</span></div><div data-v-d6f0eeee><div class="section s2" data-ani-obs="true" data-class-name="active" data-v-d6f0eeee><span class="text" data-v-d6f0eeee>Section 2</span></div></div><div class="section s3" data-ani-obs="true" data-class-name="active" data-v-d6f0eeee><span class="text" data-v-d6f0eeee>Section 3</span></div>',8),i=l({__name:"chart",setup:n=>(o(),p({elementsClass:".section"}),(n,l)=>(s(),a("div",null,[C,e(t(D)),A])))},[["__scopeId","data-v-d6f0eeee"]]);export{i as default};