LWCでのロード時にページの特定の部分に直接移動する

Aug 18 2020

LWCコンポーネントと子LWCを持つコミュニティページ名「global-device」があります。

parentLWC.html

<template>
....
<!--parent html code-->
  <div id="messagenotif">
    <a name="notifpage"></a>
    <template if:true={showChild}>
      <c-child-lwc para1={para1value}></c-child-lwc>
     </template>
  </div>
</template>

このページにアクセスすると、URLは次のようになります。 s/global-device?linkId=5&mypageid=5003M000001fMQHQA2#notifpage

ページが読み込まれたときに、ページのセクションに移動する#notifpageために使用していnotifpageます。ページは期待どおりに読み込まれますが、このセクションに移動しません。

connectedcallback方法parentLWC、私は一連の値にサーバーの呼び出しを作っていますshowchildし、para1valueが、私は、これはすべての問題には影響を持つべきではないと思います。

回答

2 PhilW Aug 18 2020 at 13:58

LWCは非同期でロードおよびレンダリングされますが、#フラグメント識別子はページのロード時に適用されます。したがって、使用したフラグメント識別子を持つ名前付きアンカーは適切な時点で存在せず、ブラウザーはそこまでスクロールできません。

ページの読み込み(LWCレンダリングを含む)が完了するのを待ってから、名前付き要素を見つけて「スクロール」するコードを適用するコードが必要になります。

1 devforce Aug 20 2020 at 01:01

@Philが述べたように、私は現在、renderedCallbackメソッドを使用してURLにフラグメント識別子があるかどうかを確認#notifpageしてから、を使用してそのセクションに移動していscrollIntoViewます。

ParentLWC.html

<template>
....
<!--parent html code-->
  <div class="notifpage">
    <template if:true={showChild}>
      <c-child-lwc para1={para1value}></c-child-lwc>
     </template>
  </div>
</template>

'parentLWC.js'

renderedCallback(){
  if(location.href.includes('#notifpage') ){
    var elmnt = this.template.querySelector('.notifpage');
    elmnt.scrollIntoView();
  } 
}