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

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;
}
>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG