要素UIドロワーコンポーネントを閉じた後にスクロールバーが復元されない問題を解決

ケース 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 座標に返します。

おすすめ

転載: blog.csdn.net/YZ_ZZZ24/article/details/123057648