【Monaca】検索窓は固定化して、結果だけをスクロールしたい。

###前提・実現したいこと
MonacaにonsenUIで検索画面を作っています。
検索キーを入力するフォームがり、検索した結果がlistで出てスクロールするだけの画面なのですが
入力フォームからスクロールしてしまいます。

HTML
1<ons-page id='searchPage'>
2  <ons-toolbar>
3    <div class='center'>検索</div>
4  </ons-toolbar>
5
6  <div id='search'>
7    <ons-search-input placeholder="Search"></ons-search-input>
8  </div>
9
10  <ons-scroller id='searchScroll'>
11    <ons-list id='searchList'>
12    </ons-list>
13  </ons-scroller>
14</ons-page>

ons-scrollerはons-listだけを囲んでいてons-search-inputは外にあるのですが
なぜか一緒にスクロールされてしまいます。

実際のHTMLを見てみるとpage__contentで囲われているようなので
これにスクロールが効いているのでしょうか・・・

HTML
1<ons-page id="searchPage" class="page" style="display: block;">
2  <ons-toolbar class="toolbar">
3    <div class="center toolbar__center toolbar__title">検索</div>
4  </ons-toolbar>
5
6  <div class="page__content">
7    <div id="search">
8      <ons-search-input placeholder="Search">
9        <input type="search" class="search-input" placeholder="Search">
10      </ons-search-input>
11    </div>
12
13    <ons-scroller id="searchScroll">
14      <ons-list id="searchList" class="list">
15      </ons-list>
16    </ons-scroller>
17  </div>
18</ons-page>

ons-scrollerの開始位置はons-search-inputの下から正しく始まっているので
そこだけにスクロールがあたれば実現できるのではないかと考えています。

ons-toolbarに入れるのは避けたいので
指定や階層を変えることでスクロールがons-scrollerだけに効くようにしたいです。

###試したこと
・ons-toolbarに入れてしまうのは避けたい。

・ons-split-viewで何かできないか・・・
→横分割の仕方が分かりませんでした。

・ons-templateでうまいことできないか・・・
→無理そうでした。

・page__contentsをもう１階層作ったらできるか・・・
→onsenUIで自動で入るもので入れ方が分かりませんでした。

・その他何かの部品でどうにかできないか。https://ja.onsen.io/v1/reference/javascript.html
→できそうなものは見つかりませんでした。

何かヒントだけでもいただけると大変助かります。
よろしくお願い致します。

行動規範の内容に同意します

回答2件

<div class="page__content">のところも、気になるのですが、、、 ons-scroller タグの前後を、divタグで囲むのはアリですか？こんな感じで↓

<div style='height:50%; width:100%; overflow-y:scroll;'>
  <ons-scroller id='searchScroll'>
    <ons-list id='searchList'>
    </ons-list>
  </ons-scroller>
</div>

私の場合、上部に検索条件入力欄、検索結果を真ん中にスクロールバー付きで表示、下部に、結果を元にした他の処理を実行するボタンという画面構成で、divタグで囲んで、高さを指定しました。
例に書いたのはパーセントですが、ピクセルでもできました。
参考まで。

投稿2017/11/08 23:54

lucky-ponta

総合スコア74

yuki-saito

2017/11/09 00:11

もちろんありです！！ divを使って検索窓と結果の分割割合などを指定して早速やってみます！ありがとうございます！

yuki-saito

2017/11/09 02:37 編集

色々やってみたのですがダメで、よく見たらやはり`page__content`に`overflow:auto`がついていて、そこが範囲になっていました。なので`ons-scroller`を外してもスクロールされていることが分かりました・・・。 `ons-page`に紐づいているものなのか分かりませんがそちらは不要なのですがそちらを無効化すると`ons-scroller`があってもスクロールが表示されなかったりルールが良く分かりませんが仕組みは分かったので、何とかCSSをいじりまくってやってみようかと思います。苦笑

行動規範の内容に同意します