[custom_scrollbar] AIP 커스텀 스크롤바(scrollbar)

#jquery_custom_scrollbar

API : http://manos.malihu.gr/jquery-custom-content-scroller/

view : http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

다운로드 : http://manos.malihu.gr/jquery-custom-content-scroller

---

# Simplebar.js
webpage : https://grsmto.github.io/simplebar/
github : https://github.com/Grsmto/simplebar
AIP : https://github.com/Grsmto/simplebar/tree/master/packages/simplebar
examples : https://grsmto.github.io/simplebar/examples/

- 자동 선언 방법 

  <div class="simplebar-area" data-simplebar >

- 직접 선언 방법 3가지 방법 (순수 js, jQuery ID, jQuery Class)

<div id="js-simpleba1" class="simplebar-area js-simplebar">
<script>
 var SimpleBarItem = new SimpleBar(document.querySelector('.js-simplebar'));    
 var SimpleBarItem = new SimpleBar( $('#js-simpleba1')[0] );
 var SimpleBarItem = $('.js-simplebar').each( function(index,element){
      console.log("okokokok");
      new SimpleBar(element);
 });
</script>

- 메서드 & 이벤트 

<script>
    SimpleBarItem.recalculate();      // 콘텐츠의 높이/너비를 다시 계산합니다.
    SimpleBarItem.getContentElement();// 동적으로 컨텐츠 추가 /콘텐츠 요소를 가져옵니다.
    var barItem = SimpleBarItem.getScrollElement(); // 스크롤 요소를 얻습니다.

    // 스크롤 이벤트 ( 400 스크롤 컨테이너 높이)
    SimpleBarItem.getScrollElement().addEventListener('scroll', function($e){
          console.log(  barItem.scrollTop, (barItem.scrollHeight - 400) );
    });

    // 타겟 이동
    SimpleBarItem.getScrollElement().scrollTop = $("#aaa").position().top ;
</script>

- 옵션값

option = {
      autoHide: true,
      forceVisible: false,
      classNames: {
        resizeWrapper: 'simplebar-resize-wrapper',
        content: 'simplebar-content',
        offset: 'simplebar-offset',
        mask: 'simplebar-mask',
        wrapper: 'simplebar-wrapper',
        placeholder: 'simplebar-placeholder',
        scrollbar: 'simplebar-scrollbar',
        track: 'simplebar-track',
        heightAutoObserverWrapperEl: 'simplebar-height-auto-observer-wrapper',
        heightAutoObserverEl: 'simplebar-height-auto-observer',
        visible: 'simplebar-visible',
        horizontal: 'simplebar-horizontal',
        vertical: 'simplebar-vertical',
        hover: 'simplebar-hover',
        dragging: 'simplebar-dragging'
      },
      scrollbarMinSize: 25,
      scrollbarMaxSize: 0,
      direction: 'ltr',
      timeout: 1000
    }     
new SimpleBar(document.querySelector('.js-simplebar'), option)

---

 
#jquery.scrollbar

webpage : https://gromo.github.io/jquery.scrollbar/

download :

jquery.scrollbar-gh-pages.zip

0.37MB

---

#Nicescroll
webpage : https://nicescroll.areaaperta.com/

---

#Scrollable Component
npm : https://www.npmjs.com/package/scrollable-component
demo : https://scrollable.julien-marcou.fr/

---

#FleXcroll

webpage : http://www.hesido.com/web.php?page=customscrollbar

 

---

#jscrollpane

webpage : http://jscrollpane.kelvinluck.com/basic.html

 

Examples

 

Examples

Home