본문 바로가기
VueJS/VueJS

[VueJS] vue 와 mCustomScrollbar 같이 사용하기 (ft. mCustomScrollbar 기본 사용법)

by 썸머워즈 2021. 1. 2.
반응형

우선 본문에 들어가기에 앞서 mCustomScrolbar에 대해 간단하게 설명하자면

"jQuery custom content scroller" 즉, 기본적으로 제공되는 스크롤 overflow를 custom하여 보기좋게 보여주는 라이브러리 라고 생각하면 된다.

 

자세한 내용은 공식홈페이지에 들어가서 확인해보자.

https://manos.malihu.gr/jquery-custom-content-scroller/

 

jQuery custom content scroller – malihu | web design

Last updated on Jul 11, 2016 Originally published on August 1, 2010 by malihu, under Plugins. Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQue

manos.malihu.gr

 

홈페이지 내부로 들어가보면 사용을 위해 css와 js 파일을 선언해야한다.

 

▷ html

<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />

 

▷ js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>

 

설정이 완료되었으면 예제를 통해 기본적인 사용방법에 대해 알아보자.

 

▷ 예제1) mCustomScrollbar 사용방법

<div id="scroll">
    ...
</div>

<script>
  $('#scroll').mCustomScrollbar({
  	theme:'minimal-dark'
  });
</script>

라이브러리답게 다양한 option들이 존재하는데 이는 홈페이지를 참고하도록 하고

이제 본론으로 들어가보자.

 

분명 mCustomScrollbar 라이브러리는 스크롤 사용에 있어서 나름 괜찮다 생각되는데,

vue와 사용하기에는 정말 아니다 싶을 정도로 짜증나는(?) 상황에 매우 많이 발생하기에 사용을 권장하고 싶지는 않다, 한마디로 vue와는 잘 맞지않는 라이브러리 라고 생각된다.

 

그렇지만 어쩔수 없이 사용할 수 밖에 없는 상황이라면 이 글이 도움이 되길 바란다.

(물론 더 좋은 방법이 있을수도 있지만 직접 vue와 사용했을때 이렇게 해결하여 기록해둔다.)

 

 

1. dom 객체 렌더링 문제

- vue를 사용하는 사람은 알겠지만 vue 2.0 이후로는 가상dom을 사용하기 때문에 $(document).ready()를 사용하여 vue안에 있는 객체를 제어할수가 없는데, 이러한 문제때문에 mCustomScroll과의 문제가 발생한다.

 

이 문제는 사실 생각보다 쉽게 해결된다. vue의 라이프사이클을 알고 있다면

dom을 생성하고 난 뒤 사용하면 되겠구나 라는걸 알 수 있고 바로 mounted() 같은 곳에서 제어를 해주면 된다.

new Vue({
    el: '#app',
    data: {},
    mounted(){
        $('#scroll').mCustomScrollbar({
            theme:'minimal-dark'
        });
    }
  });

 

2. v-for 렌더링 문제

mCustomScrollbar를 적용하게되면 아래와같이 생성되는데

 

적용대상의 dom객체 요소 아래에 div가 생성되면서 감싸는 형식이다.

여기서 vue와 연동하기 힘든점이 스크롤을 생성한다 하면 v-for를 사용해서 목록을 불러올때 많이 사용하게되는데

v-for를 통해 재렌더링 될 때 마다 mCustomScrollbar로 생성된 div를 벗어나게되는 현상이 발생한다.

 

여기서 많은 시행착오를 겪었는데 방법이 몇개 존재하지만(mCustomScrollbar 제거 후 다시 생성 등...)

결국 가장 간단한 방법은 v-for를 div로 상위에 감싸서 고정 시켜 놓는것이다.

<div id="scroll">
    <div> <!--이런식으로 v-for를 감싼다.-->
        <div v-for="arr in arrays"></div>
    </div>
</div>

 

이렇게 감싸주게 되면 재렌더링 될 때마다 벗어나는 경우는 생기지 않는다.

당장 많이 접하게 되는 부분이 저 두개라 일단 두개만 기록해두고.

차차 더 많은 경우가 생기게 되면 기록해두도록 하자.

반응형


댓글

TOP