Question

我有两个需要同时移动的水平列表，我正在使用angularjs。我设法让它工作Jquery Mousewheel（github / brandonaaron / jquery-mousewheel）。但是因为我需要设置滚动条样式，因为firefox不支持我必须使用JS滚动条所以我尝试使用指令（github angular-perfect-scrollbar）Perfect ScrollBar但它似乎没有节目。这是代码

    <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条，但水平条的宽度为0.

提前致谢。

- 编辑 -

我创建了plunker

Answer 1

您可以尝试jQuery Scrollbar。看看example。如果要使用mousescroll滚动容器，可以将here中的鼠标轮JS处理程序应用于onInit回调中的每个容器。

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

<强>的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);
    }
};

Angularjs同步两个水平列表

1 个答案: