1

Android4.0 ~ 4.3でons-pageをスクロールさせた後、pushPageで新しいページを追加すると、追加元ページのスクロールポジションが初期化されます(0になる)。

  • エミューレータと実機の両方でこの現象が発生
  • Android4.4以上やiOSでは、この現象が発生しない
  • Android4.3においてはgulp serveで立ち上げたプロジェクトに標準ブラウザでアクセスした場合は問題ないが、PhoneGapにてapk化した場合は同現象が発生する
  • ons-page内にons-lazy-repeatを利用してスクロールさせても初期化される

動作確認は
http://ja.onsen.io/project-templates/gen/onsenui-tab-bar.zip
のファイル内にあるindex.htmlを弄って確認しました。
ダウンロードした時のバージョンは1.3.8となります。

angular.module('app').controller('AppController', function ($scope) {
    $scope.doSomething = function () {
        // ons.notification.alert({ message: 'tapped' });
        navHome.pushPage('test.html'); //変更
    };
});

<ons-template id="home.html">
    <!-- varを追加 -->
    <ons-navigator var="navHome"> 
        <ons-page>
            <ons-toolbar>
                <div class="left"><ons-toolbar-button ng-click="doSomething()"><ons-icon icon="ion-compose"></ons-icon></ons-toolbar-button></div>
                <div class="center">Home</div>
                <div class="right"></div>
            </ons-toolbar>

            <ons-list style="margin: -1px 0">
                <!-- ng-repeatリストを大きく -->
                <ons-list-item modifier="chevron" class="item" ng-repeat="i in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]" ng-click="doSomething()">
                    <ons-row>
                        <ons-col width="60px">
                            <div class="item-thum"></div>
                        </ons-col>
                        <ons-col>
                            <header>
                                <span class="item-title">Rorem Ipsum{{$index}}</span>
                                <span class="item-label">5h</span>
                            </header>
                            <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </ons-col>
                    </ons-row>
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-navigator>
</ons-template>

<!-- 新しくテンプレート追加 -->
<ons-template id="test.html">
        <ons-toolbar>
        <div class="left">
            <ons-back-button>戻る</ons-back-button>
        </div>
        <div class="center">test</div>
        <div class="right"></div>
    </ons-toolbar>
</ons-template>

PhoneGapにてapk化し、実機にて動作テストを行いました。

画面スクロールしてリストをクリックしsettings.htmlをpushPageした後、戻るボタンや戻るキーで戻ると、スクロールポジションが0になっています。

monaca.io + Monacaデバッガーでも同じことが確認できます。
monaca.ioでOnsen UI Tabbarプロジェクトを選んで新規作成し、page1.htmlを

<div style="text-align: center">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<ons-button 
    ng-click="myNavigator.pushPage('new_page.html')">
    Push New Page
</ons-button>

と編集してスクロール縦幅を確保し、実機(今回テストしたのはAndroid4.1)からMonacaデバッガーで同じ現象が発生することを確認できました。

暫定的な対応として、ons-navigatorのprepushイベントでscrollTop値を取得。
postpopで値を書き戻すで元の場所を復元してます。

これはOnsenUIの不具合なのでしょうか。
それとも4.0~4.3のWebView側の問題だったりするのでしょうか。

3
  • navigatorとtabbarの組み合わせは公式のサンプルがありますので、ひとまずそちらを試してみてください。多分ちゃんと動くと思います。 github.com/monaca/project-templates/tree/master/9-ons-tab-nav
    – cither
    Commented 2015年8月1日 16:09
  • 手元のAndrod4.2.1のASUSタブレットで試しましたが、スクロール位置は正常に保存されていました。うーん、settings.html内に<ons-back-button>を設置してそれをクリックして戻った場合もダメでしょうか?
    – cither
    Commented 2015年8月5日 11:26
  • stackoverflow.com/questions/12260279/… Android4.0にはscrollTop周りのバグがあるようですが、4.0~4.3で起きるというのが謎ですね......
    – cither
    Commented 2015年8月5日 11:40

1 件の回答 1

1

どうやらWebViewのバージョンに依存しているようです。

WebViewがdisplayプロパティのnone/block切り替えでスクロールポジションのリセットをしてしまうバージョンだと、pushPage後ポジションがリセットされるようです。
「pushPage/popPage」で「display:none/block」してますので、このケースに見事に当てはまり、リセットされてました。

http://jsfiddle.net/sammy/RubNy/

$(document).click(function() {
  $('div').toggle();
});
div {
  height: 50px;
  overflow: auto;
  background: lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div>
  Top <br/>
  <br/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
  irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
  <br/> Bottom
</div>

症状が発生する端末で上記URLを開いてテストすれば、スクロールポジションがリセットされるのを確認しました。

OnsenUI + Android4.0~で、このケースに苦しめられている人は余り居ないのでしょうか?
4.4以上は症状が出ないため、気が付きにくいかもしれませんが。

それとも私がやっているようなons-page等をスクロールして次のページをpushPageするという流れが特殊なんでしょうか。
一覧 → 詳細のフローだと思うのですが。

ons-lazy-repeatを利用して、そこからpushPageすることは、一部Androidでは実質使用できない動作となっているように思います。
たとえば100アイテム分スクロールしてpushPageし戻ってきたらボジションリセットでは使い物になりませんから。

1
  • Crosswalk(1.3.0/14.43.343.23)を組み込んでテストしたところ、ポジションリセットが発生することはなくなりましたので、本件のタイトルとしては「OnsenUI + Android4.0-4.3搭載の特定WebViewでpushPage後の元ページが先頭へ移動する」のが良いかもしれません。
    – gsjp21
    Commented 2015年9月2日 0:30

この質問に回答するには、ログインする必要があります。