

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となります。

[code]

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

* * *
[code]

    <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>
    
[/code]

* * *
[code]

    <!-- 新しくテンプレート追加 -->
    <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>
    
[/code]

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

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

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

[code]

    <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>
    
[/code]

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

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

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


CC BY-SA 3.0
2015-07-16T14:09:40.073
12425
2019-12-13T18:55:43.490
2015-08-26T08:34:20.767
10563
question
monaca onsen-ui
OnsenUI + Android4.0-4.3でpushPage後の元ページが先頭へ移動する


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

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

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

[code]

    $(document).click(function() {
      $('div').toggle();
    });
[/code]

[code]

    div {
      height: 50px;
      overflow: auto;
      background: lightgrey;
    }
[/code]

[code]

    <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>
[/code]

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

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

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

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


CC BY-SA 4.0
2015-08-27T07:58:01.227
14898
2019-12-13T18:55:43.490
2019-12-13T18:55:43.490
32986
10563
12425
answer