1-2【UI開発】画面内スクロールの実装 - 【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

1章 UI開発

1-2【UI開発】OnsenUIを使った画面内スクロールの実装【ons-carousel】

前回はページ遷移の方法に関してまとめた。
it-innovation.hatenablog.com

今回は画面内でスクロールを実装する。
作りたいのはこれ↓
youtu.be

画面全体をスクロールで動かすのではなく、画面内の一部をスクロールさせる。

CSSの解説はしないといったけど、実はこの実装はOnsenUIではなく、CSSでやっている。

index.htmlの一部

<div id="top_accountList">
  <ons-list id="accountList">
      <ons-list-item ng-show="ctrl.accounts.length" ng-repeat="account in ctrl.accounts"><span id="top_accountName">        {{account.accountName}}</span><span id="top_amount">{{account.amount | number}}円</span></ons-list-item>
      <ons-list-item ng-show="!ctrl.accounts.length">口座が登録されていません</ons-list-item>
   </ons-list>
</div><!-- #top_accountList -->

account.cssの一部

#top_accountList{
    margin: 0 auto;
    width: 100%;
    height: 60%;
    border: 1px solid #CCC;
    border-radius: 10px;
    box-shadow: 1px 1px #ccc inset;
    box-shadow: 1px 1px #ccc;
    overflow:auto;
}

cssファイルの一番下に記した「overflow:auto」がこの機能の実装方法。
本来は「overflow:scroll」がスクロール機能を実現するが、自動で処理を決める「auto」も基本的にはスクロール処理をしてくれるので、ここでは「auto」を使っている。

overflowというのは「画面・ブロック」からはみ出た部分の表示をどうするのかを決定するためのもの。
以下の４つの書き方がある。

■overflow:visible
■overflow:hidden
■overflow:scroll
■overflow:auto

overflow:visible

初期設定はこれになっていて、対象の領域からはみ出ている部分も表示する

overflow:hidden

対象の領域からはみ出ている部分は非表示

口座1から口座10まで登録してあるが、口座7以降は領域からはみ出ているので表示されない。

overflow:scroll

対象の領域からはみ出ている部分はスクロールで表示

最初の動画と同じ動きをする。
youtu.be

overflow:visible

自動。基本的にはスクロールして表示してくれる。
同上。

まとめ

画面内の一部領域でスクロールを実装する場合は、「overflow:scroll」または「overflow:auto」を指定する

以上。
次回は「1-3【UI開発】OnsenUIを使ったリストの実装」