概要
こんにちは！
Noodlerのまえぷーです！
Noodl ver2.0βになってからノードの使用がガラッと変わりましたね。
その中で以前は存在した「Scroll viewノード」は廃止され。Groupノードへ統合されたようです。
今回はNoodl ver2.0βで画面スクロールを実装する方法について解説します。
最終的には次のように動かして確認しました。
Noodlで画面スクロールする方法が分かった！
— まえぷー@出窓菜園 BWG (@kmaepu) April 29, 2020
Qiita記事書きます～。#Noodl pic.twitter.com/VdCKlCcYV6
方法
Groupノードの４項目を設定でスクロールさせることができるようになります。
| 属性 | 内容 | 備考 |
|---|---|---|
| Scroll Behavior | スクロールタイプ | -- |
| Scroll Direction | スクロール方向 | スクロールタイプがNoodlの場合のみ |
| Snap Enabled | スナップ動作の有効/無効 | スクロールタイプがNoodlの場合のみ |
| Show Scrollbar | スクロールバーの表示 | スクロールタイプがNoodlの場合のみ |
【Scroll Behavior】
次の３つの項目があります。
| 属性 | 内容 |
|---|---|
| None | スクロールなし |
| Native | 従来の、パソコンのスクロール |
| Noodl | スクロールしたときだけ小さなバーが出現する |
【Scroll Direction】
次の３つの項目があります。
| 属性 | 内容 |
|---|---|
| Vertical | 垂直方向 |
| Horizontal | 水泳方向 |
| Both | 両方向 |
【Snap Enabled】
チェックを付けると、スナップ動作を有効にできます。
【Show Scrollbar】
チェックを付けると、常にスクロールバーが表示されるようになります。
おわりに
Noodl ver2.0になってからモヤモヤしていたことが１つ解決できました！
このスクロールって外部イベントをトリガにできたりしないかなぁ...。