Angularjs同步两个水平列表

Question

我有两个横向列表，需要同时移动，我使用的是angularjs。我设法让Jquery鼠标轮(github /brandonaaron/jQuerymouse轮)正常工作。但是由于我需要对滚动条进行样式化，而且firefox不支持，所以我不得不使用JS滚动条，所以我尝试了一个指令完美ScrollBar (github角-完美-滚动条)，但它似乎没有显示出来。这是密码

    <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> 

如果增加容器的大小，我会看到竖直的JS条，但是水平的JS条的宽度是0。

提前谢谢。

-编辑--

我创建了一个柱塞

Answer 1

你可以试试jQuery滚动条。看看示例。如果希望滚动带有mousescroll的容器，可以将鼠标轮JS处理程序从这里应用到onInit回调中的每个容器。

<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>

JavaScript

$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);
    }
};