浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL：053-543-9889
営業時間：9：00～18：00（月〜金）
住所：静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

react・cordovaでwindow.scrollToを効かせる

React, Cordova

reactまたはcordovaハイブリッドアプリでは、スクロール位置を保持してくれないため

window.scrollで一番上にスクロールすることができない。

スクロールするには、idにscrollプロパティをコードで無理やり持たせる必要がある。

javascript

document.getElementById("main-page").scroll(0,0)

これをcomponentDidmount内で設置すれば前ページからの移動時に対象のページが

一番上の位置までスクロールしてくれるようになる。

html

<div id="main-page">
  <div><p>上</p></div>
  <div><button>ボタン</button></div>
  <div><p>下</p></div>
<div>

css

#main-page {
  margin-bottom: calc(20px + constant(safe-area-inset-bottom));
  margin-bottom: calc(20px + env(safe-area-inset-bottom));
  margin-left: 6px;
}
  • この記事いいね！ (0)
関連記事