jQuery 사용자 정의 스크롤바를 사용하여 자동 스크롤

Question

내 페이지는 9 개의 카테고리가있는 Accordion (Primefaces에서)으로 구성됩니다. 한 범주에서 나는 화면 너비보다 큰 너비의 테이블을 가지고 있습니다. 내가 기본보다 더 나은 찾고 수평 스크롤을 사용하기로 결정, 그래서 검색하고 몇 가지 조사 후 Malihu 스크롤

http://manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html

라는 jQuery를 스크롤 막대를 발견, 나는 성공적으로 특정 아코디언 탭 등에서 사용하는 관리 수평 스크롤 바 문제는 내가 특정 탭을 확장 한 채로 두었을 때 내 몸 전체가 아래로 스크롤 할 수 없다는 것입니다. 대신 마우스 휠을 사용하여 스크롤 할 때 아래쪽의 픽셀 (자동으로 하나의 아코디언 탭 헤더가 손실 됨)을 자동 스크롤합니다 또는 내 몸 전체의 스크롤 막대를 사용하여 스크롤 할 때 (전체 바디의 스크롤 막대는 사용자 정의 스크롤 막대가 아니라 공통 스크롤 막대임을 여기에서 지적하고자합니다). 사용자 정의 스크롤바가있는 탭이 확장되어 있지 않으면 내 페이지가 훌륭하게 작동합니다.

이

내 아코디언은 아래로 스크롤 :

그리고 이것은 내가 사용자 정의 스크롤와 아코디언 탭 확장 내 페이지 아래로 스크롤 할 수있는 가장입니다 : 당신으로

몸이 완전히 아래로 스크롤되지 않은 것을 볼 수 있습니다. 아래쪽으로 스크롤하려고하면 열려있는 탭을 접을 때까지까지이 위치로 이동합니다.

Answer 1

해결책을 찾았습니다.

먼저 문제는 autoExpandHorizontalScroll이라는 Malihu 스크롤 막대 옵션에있었습니다. 이 옵션이 정확히 무엇인지는 모르지만 필요합니다. 이 옵션이 켜져 있지 않으면 테이블을 아코디언에 넣을 때 스크롤 막대가 나타나지 않습니다. 아코디언 바깥에 테이블을 배치하면 autoExpandHorizontalScroll을 설정해도 스크롤바가 제대로 작동합니다. XHTML에서 내 코드는 다음과 같습니다

<script> 
    (function($){ 
     $(window).load(function(){ 
      $(".horizontalScrollbar").mCustomScrollbar({ 
       scrollButtons:{ enable:false }, 
       horizontalScroll:true, 
       advanced:{autoExpandHorizontalScroll:true} 
      }); 
     }); 
    })(jQuery); 
</script> 

내가 전에 말했듯이 내가 아코디언 외부에 내 테이블을 둘 때, 스크롤바 어쨌든 나타납니다. 차이점은 autoExpandHorizontalScroll이 true 일 때 autoscroll 문제 (원래 게시물에 설명되어 있음)가 표시되지만 false로 설정하면 내 몸이이 귀찮은 자동 스크롤을 중지한다는 것입니다. 그래서 나는이 옵션이 무엇인지보기 위해 Malihu의 코드를 살펴보기로 결정했습니다.

autoExpandHorizontalScroll 두 가지 기능에 나타납니다 init:function(options) 및 update:function() 그것은 않습니다 단지 두 경우 모두에서 다음

mCSB_container.css({"position":"absolute","width":"auto"}).wrap("<div class='mCSB_h_wrapper' style='position:relative; left:0; width:999999px;' />").css({"width":mCSB_container.outerWidth(),"position":"relative"}).unwrap(); 

내가 여기 무슨 생각을 모르겠지만, 일부는 실험 후, 방금 init:function(options) (라인 214에 댓글 달기)에있는 부분을 제거하고 업데이트 기능에있는 부분을 떠났습니다. 이 후 스크롤바는 아코디언에서 완벽하게 작동하며 자동 스크롤 문제로 더 이상 나를 괴롭히지 않습니다.

그런데 : 매우 구체적인 질문을 게시하는 것에 대해 유감스럽게 생각합니다. 누군가 유용하다고 생각하길 바랍니다.