ケース 1:
プロジェクトの要件により、ドロワーのポップアップ ウィンドウのコンテンツは比較的大きいため、スタイルの点で
使用 ::v-deep .el-drawer__body {
overflow: auto;
}
コンポーネントにスクロールバーを追加します。
問題がありました:
ドロワー コンポーネントを閉じるたびに、再度開いた後にスクロール バーの位置が復元されません。
解決:
v-if 動的ロード用にコンポーネントの外側に div のレイヤーを追加します。これにより、動的値が false になるたびに、dom 要素のこの部分が破棄されます。
true の場合、DOM 構造が再レンダリングされ、スクロール バーの位置も復元されます。
ケース 2:
要件としては、ページを切り替えるためのコンテンツをドロワーコンポーネントに含めます。
質問:
前または次のステップをクリックするたびに、スクロール バーの位置は変わりません。たとえば、前のページのスクロール バーの位置は 50 です。
次に、次のページをクリックすると、スクロール距離が再び 0 になるはずです。
解決:
要素を調べると、スクロール領域のクラス名が「el-drawer__body」であることがわかります。
それで合格します
document.querySelector(".el-drawer__body").scrollTo(0,0)
問題を解決するためのこのコード行
説明:
document.querySelector: el-drawer__bodyのクラス名ノードを取得
scrollTo()
このメソッドは、インターフェイスを指定された要素の指定された座標位置までスクロールさせることができます。
scrollTo(0,0) はスクロール位置を 0 座標に返します。