[Ionic]ion-contentのスクロールを止める方法

ion-contentは、ion-header、ion-footerのheightを考慮して表示領域を調整してくれて、しかもscroll設定までつきます。非常に便利です。
が、しかし、スクロールさせたくない画面が出てきた時、止め方がわかりませんでした。そこで、公式フォーラムとかStackOverflowとかでscrollを止める方法を調べたら色々あったのでまとめます。

私的な結論

no-bounceを使うのが良さそうな気がする

ion-contentを使わない

ion-headerもion-footerもないようなページならそもそもion-contentを使わないのもありだと思います。

<div class="fullscreen">
</div>

.fullscreen{
    background-color: #fff;
	position: absolute;
	top: 0px;
	right: 0px;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
}

ただし、この場合、ページ遷移時にion-navbarに自動的に「戻るボタン」が表示される恩恵が得られないので自分で戻るボタンを配置する必要があります。

また、ion-header、ion-footerを付けた場合、ion-contentのように表示領域の自動調整がないため、paddingなどでdivタグ内の要素とion-header、ion-footerがかぶらないように調節する必要がありそうです。

CSSで止める

CSSでion-contentのscroll設定を止める方法です。具体的には以下のコードのような感じです。

.scroll-content{
    overflow: hidden;
}

ただし、scroll-contentというクラス名は、ion-scrollにも使用されているようなので、そちらもスクロールできなくなります。ion-scroll使わないならこの方法でも良いかもしれません。

ion-fixedで止める

StackOverflowで見ました。ion-fixedを付けたdivタグで囲ってしまう方法です。この方法なら、ion-header、ion-footerを付けた時のサイズ自動調整の恩恵を受けつつ、スクロールを止めることが出来ると思います。

<ion-content>
	<div ion-fixed>		
	</div>
</ion-content>

ちなみに、Chromeでion-fixedの中身を見てみたら下のCSSが適用されていました。

.fixed-content{
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: absolute;
	display: block;
}

さらに見てみるとion-fixedは自動的にfixed-content内に配下されるようで、固定したい領域とスクロールしたい領域を手軽に分けることが可能っぽいです。

<ion-content>
	<div ion-fixed>
	 test1← fixed-content内		
	</div>
	<div>
	test ← scroll-content内
	</div>
</ion-content>

参考画像

まとめ

私は、今までion-content使わない＆CSSで止める策を使ってきましたが、今回調べてみて他にも方法があることがわかったので今度、実践でも使ってみようかと思います。

番外編？no-bounce

初めて、その存在を知りましたが、ion-contentにno-bounceをつける方法もありそうです。
この属性をつけると、ion-contentの表示領域内だとスクロールしない。表示領域を超えるとスクロールするようになるといった動作になります。

<ion-content no-bounce>
</ion-content>

厳密には、scrollを止めているわけではないので、番外編としましたが、スクロールを止めたいユースケースのほとんどはiOSのバウンススクロールが原因だと思うので、これが一番よいんじゃないかという気がします。