1 前言

　　在移動端受螢幕大小所限，展示內容很多的時候，就要使部分割槽域進行滑動。本文展示專案中所有到的幾種方式，大家可以看自己的需求選擇合適的滑動方式。實現滑動的基本原理，有兩個容器A、B,假如A在外層，B在內層；外層的A寬度或高度固定，內層容器B寬度或者高度大於A即可實現滾動。

2 實現方式

1. ion-scroll

利用ionic自帶的滑動指令　

<ion-view view-title="Dashboard">
    <ion-content class="padding" has-bouncing="false">
        <ion-scroll
 
 has-bouncing="false" style="width:100px;border:solid 1px red;" direction="x">
            <div style="width:200px;">
                ion-scroll實現滑動，用ionic自帶的滑動元件實現滑動，ion-scroll其他屬性可參考官網文件
            </div>
        </ion-scroll>
    </ion-content>
</ion-view>

2. css的overflow

<ion-view view-title="Dashboard">
    <ion-content class="padding" has-bouncing="false"  overflow-scroll="true">
        <div style="width:160px;height:300px;border:solid 1px red;overflow: auto;padding:20px;">
            <div style="width:400px;height:500px;border:solid 1px blueviolet"
 
>
                使用css的overflow屬性atuo或者scroll實現滾動，使用css的overflow屬性atuo或者scroll實現滾動
                使用css的overflow屬性atuo或者scroll實現滾動，使用css的overflow屬性atuo或者scroll實現滾動
                使用css的overflow屬性atuo或者scroll實現滾動，使用css的overflow屬性atuo或者scroll實現滾動
            </div>
       </div>
    </ion-content>
</ion-view>

• overflow:auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
• overflow:scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
  注：使用這種方式，ion-content需要新增overflow-scroll="true"指令，表示使用系統自己的滾動來代替ionic的scroll，ionic是實現了自己的一套滾動方式的。

3. 監聽touch事件

<div style="width:100%;border:solid 1px;height:60px;overflow: hidden;white-space:nowrap;padding:10px 20px;" id="dash_scroll_container">
    <div ng-repeat="d in datas" style="margin-right:20px;border:solid 1px #FFC900;height:100%;width:100px;display:inline-block;text-align:center;line-height:40px;">
        {{d}}
    </div>
</div>

對應的js

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {
    $scope.datas=[1,2,3,4,5,6,7,8,9,10];
    var startX=0,startY=0;
    var $domScroll=$("#dash_scroll_container");
    $domScroll.on("touchstart",function(e){
        startX=e.originalEvent.changedTouches[0].pageX;
        startY=e.originalEvent.changedTouches[0].pageY;
        console.log("start:("+startX+","+startY+")"+"--"+$(this).scrollTop());
    });
    $domScroll.on("touchmove",function(e){
        var x = e.originalEvent.changedTouches[0].pageX-startX;
        var y = e.originalEvent.changedTouches[0].pageY-startY;
        if ( Math.abs(x) > Math.abs(y)) {//左右滑動  
          scrollLeft($(this),x);   
        }else if( Math.abs(y) > Math.abs(x)){//上下滑動
            scrollTop($(this),y);   
        }
        function scrollLeft(obj,x){ 
            var currentScroll = obj.scrollLeft();
            console.log(parseInt(currentScroll)-x);
            obj.scrollLeft(parseInt(currentScroll)-x);//滑動的距離
            e.preventDefault();  
            e.stopPropagation();
        }
        function scrollTop(obj,y){ 
            var currentScroll = obj.scrollTop();
            console.log(parseInt(currentScroll)-y);
            obj.scrollTop(parseInt(currentScroll)-y);//滑動的距離
            e.preventDefault();  
            e.stopPropagation();
        }
    });
})

通過監聽手指的touchstart、touchmove事件，獲得滑動的距離，呼叫外部容器div的滾動條滾動到對應距離。

• $(selector).scrollLeft(position)：設定元素的水平滾動位置

• $(selector).scrollTop(position)：設定元素的垂直滾動位置

  最後，再使用angularjs的指令，講滾動的監聽封裝為一個指令，方便以後滑動時候使用。

在directive.js中新增：

angular.module('starter.directives', [])
.directive('myScroll',function(){
    function link($scope, element, attrs) { 
        var $domScroll=$(element[0]);
        var startX=0,startY=0;
        $domScroll.on("touchstart",function(e){
            startX=e.originalEvent.changedTouches[0].pageX;
            startY=e.originalEvent.changedTouches[0].pageY;
            console.log("start:("+startX+","+startY+")"+"--"+$(this).scrollTop());
        });
        $domScroll.on("touchmove",function(e){
            var x = e.originalEvent.changedTouches[0].pageX-startX;
            var y = e.originalEvent.changedTouches[0].pageY-startY;
            if ( Math.abs(x) > Math.abs(y)) {//左右滑動  
              scrollLeft($(this),x);   
            }else if( Math.abs(y) > Math.abs(x)){ //上下滑動
                scrollTop($(this),y);   
            }
            function scrollLeft(obj,x){ 
                var currentScroll = obj.scrollLeft();
                console.log(parseInt(currentScroll)-x);
                obj.scrollLeft(parseInt(currentScroll)-x);//滑動的距離
                e.preventDefault();  
                e.stopPropagation();
            }
            function scrollTop(obj,y){ 
                var currentScroll = obj.scrollTop();
                console.log(parseInt(currentScroll)-y);
                obj.scrollTop(parseInt(currentScroll)-y);//滑動的距離
                e.preventDefault();  
                e.stopPropagation();
            }
        });
    } 
    return {
        restrict: 'A',
        link: link 
    };
});

這樣封裝後使用起來就方便了，在需要滑動的元素上加上指令 my-scroll。

<div my-scroll style="border:slateblue solid 1px;width:100%;height:300px;overflow: hidden;margin:0;padding:0;" class="row">
    <div class="col-20"> 
        <div ng-repeat="d in datas" style="margin-bottom:20px;border:solid 1px #007AFF;height:80px;text-align:center;line-height:80px;">
            地區{{d}}
        </div>
    </div>
    <div class="col-80">
        <div style="width:200%;border:solid 1px #009689;overflow: hidden;white-space: nowrap;">
            <div ng-repeat="d in datas" style="margin-bottom:20px;border:solid 1px #FFC900;height:80px;text-align:center;line-height:80px;">
                {{d}}每行
            </div>
         </div>
    </div>
</div>