[JQUERY] select를 예쁘게 바꿔주는 플러그인 niceSelect 사용법2

niceSelect 기본 사용법은 아래의 포스팅에 정리되어 있으니 생략한다.

[JQUERY] select를 예쁘게 바꿔주는 플러그인 niceSelect 사용법1

 

응용이랄까 추가작업이 필요한 경우에 사용했던 소스 2가지를 정리해 본다.

1. niceSelect 사용 후 optionbox의 스크롤을 추가할 경우

1-1. .nice-select .list에 높이 제한을 두면 스크롤이 생긴다.

.nice-select .list {
    height: 200px;
}

 

1-2. 스크롤에 디자인이 필요한 경우

스크롤도 플러그인을 사용한다. 찾아보니 같이 사용하는 스크롤 플러그인은 nicescroll가 많이 나왔다.

Nicescroll jQuery Plugin – jQuery plugin for custom scrollbars on desktop and mobile browsers

 

1) 플러그인 소스를 가져온다

<script src="https://www.jqueryscript.net/demo/Mobile-friendly-Custom-Scrollbar-Plugin-With-jQuery-NiceScroll/js/jquery.nicescroll.min.js"></script>

2) 작성시 niceSelect소스 아래에 넣어주면 된다

<script>
  $(document).ready(function () {
    $('select').niceSelect();
    $('.nice-select .list').niceScroll();
  });
</script>

완성예시(글자색 빨간색은 따로 style을 입혀야함)

2. niceSelect사용시 select option이 추가되거나 변경될 경우

option이 변경되거나 추가된 사항이 반영되도록 select option 변경 이벤트가 끝난 다음에 아래를 추가하면 된다.

nicescroll을 사용했다면 같이 추가해준다.(추가 안하면 작동 안됨..)

// select option 변경 이벤트가 끝난 후
$('select').niceSelect('update');
$('.nice-select .list').niceScroll();

 

* 22.06.07.확인된 오류사항 및 해결

반응형으로 제작한 사이트에 적용을 했더니 모바일 환경에서 niceScroll 스크롤이 되지 않았다.ㅇㅁㅇ

다행이 css로 해결가능했다.

.list{overflow-y: auto !important; -ms-overflow-style: none; scrollbar-width: none; }
.list::-webkit-scrollbar {display: none; }