Q&A
実現させたいこと
pushPageで移動後、ons-listをある程度スクロールした後、ons-back-buttonで前ページに戻り再度pushpageした時に、スクロールしていた位置まで移動させたいです。
概要
プラットフォーム：Monaca Onsen UI JS Navigation
HTML
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 10 <link rel="stylesheet" href="components/loader.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 13 <link rel="stylesheet" href="css/style.css"> 14 15 <script> 16 // Page init event 17 document.addEventListener('init', function(event) { 18 var page = event.target; 19 20 if (page.matches('#first-page')) { 21 22 page.querySelector('#push-button').onclick = function() { 23 document.querySelector('#navigator').pushPage('page2.html'); 24 }; 25 26 } else if (page.matches('#second-page')) { 27 28 page.querySelector('#pop-button').onclick = function() { 29 document.querySelector('#navigator').popPage(); 30 }; 31 32 var list = ""; 33 for(var i = 0; i <= 60; i++){ 34 list += '<ons-list-item>アイテム' + i + '</ons-list-item>'; 35 } 36 document.getElementById('ons_list').innerHTML = list; 37 38 39 } 40 }); 41 42 if (ons.platform.isIPhoneX()) { 43 document.documentElement.setAttribute('onsflag-iphonex-portrait', ''); 44 document.documentElement.setAttribute('onsflag-iphonex-landscape', ''); 45 } 46 </script> 47 <script src="test.js"></script> 48</head> 49<body> 50 <ons-navigator id="navigator" page="page1.html"></ons-navigator> 51 52 <ons-template id="page1.html"> 53 <ons-page id="first-page"> 54 <ons-toolbar> 55 <div class="center">Page 1</div> 56 </ons-toolbar> 57 58 <div class="content" style="text-align: center"> 59 <p>This is the first page.</p> 60 <ons-button id="push-button">Push page</ons-button> 61 </div> 62 </ons-page> 63 </ons-template> 64 65 <ons-template id="page2.html"> 66 <ons-page id="second-page"> 67 <ons-toolbar> 68 <div class="left"><ons-back-button>Page 1</ons-back-button></div> 69 <div class="center">Page 2</div> 70 </ons-toolbar> 71 72 <div class="content" style="text-align: center"> 73 <p>This is the second page.</p> 74 <ons-button id="pop-button">Pop page</ons-button> 75 <ons-list id="ons_list"></ons-list> 76 </div> 77 78 </ons-page> 79 </ons-template> 80</body> 81</html>
document.querySelector('#second-page .page__content').scrollTop;でスクロール位置の情報は取得できますが、
ons-back-buttonではスクロール位置の維持をしてくれてると聞いたことがあるので、質問させていただきました。
回答よろしくお願いします。
回答1件
0
ベストアンサー
ons-navigatorのprepopイベントの発火でスクロール位置を取得します。
JavaScript
1var scrollTop = 0; 2ons.ready(function () { 3 document.querySelector("#navigator").addEventListener("prepop", function (e) { 4 if (e.enterPage.id == "first-page") { 5 scrollTop = document.querySelector("#second-page .page__content").scrollTop; 6 console.log(scrollTop); 7 } 8 }); 9});
ons-list作成後にスクロール位置を設定します。
JavaScript
1var elem = document.querySelector("#second-page .page__content"); 2if (elem && (scrollTop > 0)) elem.scrollTop = scrollTop;
投稿2020/05/06 06:46
総合スコア276
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/07 16:59