ionicでAngularJSの$anchorScrollを使ってハマった

注：古い記事の為、内容が最新ではない可能性がありますm(＿ ＿)m

ionicでAngularJSの$anchorScrollを使ってハマった

だいぶお久しぶりになりますマツウラです。
今回はionic frameworkでAngularJSの$anchorScrollが期待通りに動作しなかったことについてです。

まず結論から書いておきます。

結論：$ionicScrollDelegateを使う

AngularJSの$anchorScrollではなく、ionicの$ionicScrollDelegate serviceを使ってください。

実際にハマった経緯について書いておきます。

$anchorScrollを使う

WebViewを使ったモバイル・アプリの開発中に、HTML中の指定要素までスクロールしたい場面がありました。
HTMLは次のとおりです。

<ion-content ng-controller="ItemsCtrl">
  <div class="card" ng-repeat="item in items">
    <div id="anchor{{$index}}" class="item item-text-wrap">
      <!--content-->
    </div>
  </div>
</ion-content>

そして、AngularJSの$locationと$anchorScrollを使ったスクロールを実装しました。

Pure AngularJSの場合

AngularJSの機能のみでスクロールを実装する場合、次のようなコードを考えました。
実際に指定のIDにスクロールする際に下記scrollToを呼び出すことになります。

$scope.scrollTo = function(id) {
    if($location.hash() !== id) {
        $location.hash(id);
    }else {
        $anchorScroll();
    }
};

しかし、上記コードでは何の動作もしませんでした。
いったい何がいけなかったのでしょう？

原因

この問題はionicの公式フォーラムで判りました。
Hashbang scroll - can’t scroll up to top of content manually

フォーラムの3番目のポストではionicの共同制作者の方が投稿してくれています。

まずionicではカスタムスクロール機構を採用しているため、$anchorScrollは動作しないとのことでした。
代わりに$ionicScrollDelegateを使ってくれという話でした。

解決

実際に$ionicScrollDelegateを使ってコードを書いてみました。
jsコードは次のようになります。

$scope.scrollTo = function(id) {
    if($location.hash() !== id) {
      $location.hash(id);
    }
    $ionicScrollDelegate.anchorScroll(true);
}

これで無事に指定IDまでスクロールさせることが出来るようになりました！

---

ionicはCSS frameworkとJavaScript UIライブラリの両方の機能を持ち、AngularJSの拡張機能として開発されています。
そのためAngularJSとの相性は非常に良いのが特徴です。

ただ、今回のようにionic側の実装に影響を受け、代わりのAPIが提供されている場合があります。
何らかの機能を実装する場合は、一度関連しそうな項目がないか公式Docを参照してみると良いかもしれません。