###前提・実現したいこと
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
をもう1階層作ったらできるか・・・
→onsenUIで自動で入るもので入れ方が分かりませんでした。
・その他何かの部品でどうにかできないか。https://ja.onsen.io/v1/reference/javascript.html
→できそうなものは見つかりませんでした。
何かヒントだけでもいただけると大変助かります。
よろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/09 00:11
2017/11/09 02:37 編集