vue でデータを再取得するとページが長くなり、ページの更新後にブラウザのスクロールバーを前の閲覧記録の位置までスクロールする必要があります。そして、現在のページのどの要素がスクロールバーを生成するかを取得するメソッドです。

現在のページのスタイルは次のとおりです。

コードは次のとおりです。

  <section id="detailSection">
    <el-table
      ref="multipleTable"
      :data="logDetailList"
      style="width: 650px;margin:20px auto;"
      id="dialogDetail"
      :show-header="false"
      :cell-style="cellStyle"
      v-loading="formLoading"
    >
      <el-table-column
        class="log-detail-origin_timestamp"
        prop="_source.origin_timestamp"
        label="时间"
        width="185"
      ></el-table-column>
      <el-table-column class="log-detail-msg" label="查询的log">
        <template slot-scope="props">
          <el-button
            class="asidebtn-up"
            v-if="props.$index == 0"
            type="primary"
            @click="searchUp"
          >向上查询</el-button>
          <el-button
            class="asidebtn-down"
            v-if="props.$index == logDetailList.length - 1"
            type="primary"
            @click="searchDown"
          >向下查询</el-button>
        </template>
      </el-table-column>
    </el-table>
  </section>

まず、現在の el-table の高さを取得します(ここでの $refs の後の multipleTable は、el-table の ref によってバインドされた値です)

 let positionHeight = this.$refs.multipleTable.bodyWrapper.scrollHeight;

次に、インターフェイスを使用して新しいデータを取得し(つまり、logDetailList の値を更新し)、新しいデータをページにレンダリングします。

最後に、データのレンダリングが完了した後、$nextTick メソッドを使用してスクロールバーを前の位置に配置します。

(1) 新規データのel-table長を取得する

let positionHeight2 = this.$refs.multipleTable.bodyWrapper.scrollHeight;

(2) 長さの減算。新しいデータページの長さ - 古いデータページの長さ = 現在のスクロールバーのスクロール位置

let screenHeight = positionHeight2 - positionHeight;

(3) スクロールバーの位置を設定します。注:scrollTo メソッドは、ページ上にスクロールバーを持つ要素である必要があります。el-table の親要素である必要があります。

document.querySelector(".content-container").scrollTo(0, screenHeight);

これで完了です。

追加：

現在のページのどの要素がスクロールバーを生成するかを取得するメソッド (vue): ページがスクロールされた後、コンソールに出力されます。

methods: {    
  findscroller(element) {
    element.onscroll = function() {
      console.log(element);
    };
  Array.from(element.children).forEach(this.findscroller);
 }
}
mounted() {
  this.findscroller()
}

または、次のコードをコンソールに直接コピーします。Enterしてスクロールバーをドラッグします

function findscroller(element){
  element.onscroll=function () {
    console.log(element)
  }
  Array.from(element.children).forEach(findscroller)
}
findscroller(document.body)

おすすめ