AEM Sites：コンポーネントは、カスタマイズされたレスポンシブグリッドを使用して、オーサリング中に自動スクロールして上部に表示されます
この記事では、Adobe Experience Manager（AEM） Sitesで、カスタマイズされたレスポンシブグリッドを使用する際に、オーサリング中にコンポーネントがページの上部に自動スクロールされる問題に対処する方法について説明します。 このソリューションには、レスポンシブグリッドの実装をレビューし、ベストプラクティスに沿って調整することが含まれます。
説明 description
環境
Adobe Experience Manager（AEM）サイト（すべてのバージョン。AEM 6.5およびAEM as a Cloud Serviceで確認）
症状
カスタマイズされたレスポンシブグリッドを使用するページで、テキストや画像などの特定のコンポーネントをオーサリングする場合、コンポーネントは、意図した挿入ポイントに留まることなく、ページの上部まで自動的にスクロールできます。 この動作はオーサリングプロセス中に発生し、すべてのコンポーネントタイプで一貫して再現できるわけではありません。 コンポーネントは、コンテンツが追加されたり、ページが更新されたりすると、意図した位置に戻ります。 この問題は、クリーンで標準（OOTB）のAEM インスタンスでは発生しません。
原因
自動スクロール動作は、カスタマイズされたレスポンシブグリッドのSling リソースタイプと、基盤コンポーネントから継承された実装との間に不一致または不整合が発生したことが原因です。 これにより、オーサリング UIで予期しない動作が発生する可能性があります。 この問題は、カスタマイズされた環境に固有のもので、標準的な製品動作ではありません。
解決策 resolution
問題を解決するには、次の手順に従います。
-
カスタマイズしたレスポンシブグリッドの実装を確認します。
- CRXDE Liteまたはコードリポジトリでテンプレートまたはページ構造を開きます。
- レスポンシブグリッドとその子コンポーネントのSling リソースタイプを確認します。 リソースタイプが適切なWCM Foundationまたはコアコンポーネントのリソースタイプ（
wcm/foundation/components/responsivegridまたは関連するコアコンポーネントなど）を一貫して参照していることを確認します。
-
すぐに利用できる（OOTB）実装との比較：
- OOTB レスポンシブグリッド実装を使用して、新しいページまたはテンプレートを作成します。
- 同じコンポーネントを作成し、自動スクロールの問題が発生するかどうかを確認します。
- カスタマイズした実装とOOTB バージョンを比較して、構造またはリソースタイプ設定の違いを特定します。
-
テンプレート構造とカスタマイズを検証します。
- オーサリング中にDOM構造またはイベント処理に影響を与える可能性のある、レスポンシブグリッドまたはコンテナコンポーネントのカスタムコードまたはオーバーライドを確認します。
- カスタマイズした実装と、OOTB レスポンシブグリッドで使用されるベストプラクティスを調整します。
-
変更を加えた後のテスト：
- 実装を更新した後、コンポーネントのオーサリングを再度テストして、問題が解決されたかどうかを確認します。
- 問題が解決しない場合は、カスタマイズを段階的に削除して、原因をさらに特定します。
-
コンポーネントがオーサリング中に目的の挿入ポイントに残り、上に自動スクロールしないことを確認します。