Angularjs 두 개의 수평리스트 동기화

Question

동시에 이동해야하는 두 개의 수평리스트가 있는데, 나는 angularjs를 사용하고 있습니다. Jquery Mousewheel (github/brandonaaron/jquery-mousewheel)이 작동하도록했습니다. 하지만 스크롤바가 필요하기 때문에 파이어 폭스는 JS 스크롤바를 사용해야했다. 따라서 Perfect ScrollBar을 지시문 (github angle-perfect-scrollbar)으로 시도했지만 표시되지 않은 것 같습니다. I는 I 수직 JS 바 있지만, 수평 한 참조 컨테이너의 크기를 증가 미리 0

감사의 폭을 가질 경우 이것은 코드

<div id="content"> 
<perfect-scrollbar class="scroller" wheel-propagation="true" minScrollbarLength="100" suppressScrollY="true" wheel-speed="50" useBothWheelAxes="true" refresh-on-change="items"> 
<ul id = "top" class="horizontal-slide header-slide" > 
     <li class="span2 animate-repeat borderlist description" ng-repeat="item in items | filter:search" ng-mouseenter="mouseEnterItem(item)" ng-mouseleave="mouseLeaveItem(item)"> 

      <a href="#" class="text-block" > 
       <div class="vertical-text " ng-class="{textblur: !item.itemMouseOver && itemMouseOver, textShine : item.itemMouseOver && itemMouseOver}">{{item.name}}</div> 
      </a> 

     </li> 

</ul> 
</perfect-scrollbar> 
    <perfect-scrollbar class="scroller" wheel-propagation="true" minScrollbarLength="100" suppressScrollY="true" wheel-speed="50" useBothWheelAxes="true" refresh-on-change="items">  
<ul id="bottom" class="horizontal-slide "> 
    <li class="span2 animate-repeat borderlist image-block " ng-repeat="item in items | filter:search" ng-mouseenter="mouseEnterItem(item)" ng-mouseleave="mouseLeaveItem(item)"> 
     <ul class=" "> 
     <li class="image-li " ng-repeat="img in item.imgs " > 
        <a href="#" class=""> 
        <img src="{{img.img}}" alt="" ng-class="{imgblur: !item.itemMouseOver && itemMouseOver}" /> 
       </a> 
     </li> 
     </ul> 
    </li> 
</ul> 
</perfect-scrollbar> 
</div> 

이다. 당신은 jQuery Scrollbar을 시도 할 수

--EDIT--

은 내가 plunker

Answer 1

를 만들었습니다. example을보십시오. mousescroll로 컨테이너를 스크롤하려면 onInit 콜백 내의 각 컨테이너에 here의 mousewheel JS 핸들러를 적용 할 수 있습니다.

HTML

<div id="content"> 
    <ul id="top" class="horizontal-slide header-slide scroller scrollbar-outer" jquery-scrollbar="jQueryTopScrollbarOptions"> 
     <li class="span2 animate-repeat borderlist description" ng-repeat="item in items | filter:search" ng-mouseenter="mouseEnterItem(item)" ng-mouseleave="mouseLeaveItem(item)"> 
      <a href="#" class="text-block" > 
       <div class="vertical-text " ng-class="{textblur: !item.itemMouseOver && itemMouseOver, textShine : item.itemMouseOver && itemMouseOver}">{{item.name}}</div> 
      </a> 
     </li> 
    </ul> 
    <ul id="bottom" class="horizontal-slide scroller scrollbar-outer" jquery-scrollbar="jQueryBottomScrollbarOptions"> 
     <li class="span2 animate-repeat borderlist image-block " ng-repeat="item in items | filter:search" ng-mouseenter="mouseEnterItem(item)" ng-mouseleave="mouseLeaveItem(item)"> 
      <ul class=" "> 
       <li class="image-li " ng-repeat="img in item.imgs " > 
        <a href="#" class=""> 
         <img src="{{img.img}}" alt="" ng-class="{imgblur: !item.itemMouseOver && itemMouseOver}" /> 
        </a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

자바 스크립트

$scope.containers = {}; 

$scope.jQueryTopScrollbarOptions = { 
    "onScroll": function(y, x){ 
     if(!$scope.containers.top) 
      $scope.containers.top = this.container; 
     if($scope.containers.bottom) 
      $scope.containers.bottom.scrollLeft(x.scroll); 
    } 
}; 

$scope.jQueryBottomScrollbarOptions = { 
    "onScroll": function(y, x){ 
     if(!$scope.containers.bottom) 
      $scope.containers.bottom = this.container; 
     if($scope.containers.top) 
      $scope.containers.top.scrollLeft(x.scroll); 
    } 
};