在 el-scrollbar 中使用 el-image 懶加載，按照官方文檔描述的，在不指定 scroll-container 的情況下，它會自動匹配最近一個 overflow 值為 auto 或 scroll 的父元素，信以為然的就沒有管 scroll-container 的配置，結(jié)果……我把滾動條滾爛了應(yīng)該懶加載的圖片都沒有加載出來！！！！！

以為是一個 bug ？換用 div 標(biāo)簽，設(shè)置為可滾動，應(yīng)該懶加載的圖片又是正常加載出來了……網(wǎng)上搜尋資料，木有盆友發(fā)表相關(guān)資料，好吧自己來吧……

官方文檔描述，可以使用 scroll-container 指定監(jiān)聽 scroll 事件的容器，值類型為 string / HTMLElement ，然后就沒有了，感覺描述的太簡單了，也沒有示例代碼。HTMLElement 類型倒能理解是什么意思，但是 string 類型沒有琢磨出來。那就給指定一個 HTMLElement 吧。

HTMLElement 指的是 DOM 對象，也就是說可以給 scroll-container 指定一個 overflow 值為 auto 或 scroll 的 DOM 對象。我們先分析一下 el-scrollbar （如果你已經(jīng)了解它的結(jié)構(gòu)，就當(dāng)我沒說這句話），它是由最外層組件層（el-scrollbar）、內(nèi)容包裹容器（wrap）、水平/垂直滾動條組成，內(nèi)容溢出需要滾動就發(fā)生在內(nèi)容包裹容器上面，所以我們要給 scroll-container 指定的 HTMLElement 應(yīng)該就是它了，讓我們試試吧。

文檔結(jié)構(gòu)

<template>
  <el-scrollbar ref="el_scrollbar" style="height: 100%">
    <el-image
      v-for="(item, index) in photoList"
      :key="index"
      :src="item.imgsrc"
      fit="cover"
      lazy
      :scroll-container="scrollContainer"
    ></el-image>
  </el-scrollbar>
</template>

<script>
export default {
  name: "ArticleList",
  data() {
    return {
      photoList: [
        { imgsrc: "...", text: "..." }
      ],
      scrollContainer: HTMLElement
    };
  },
  mounted() {
    this.scrollContainer = this.$refs.el_scrollbar.wrap;  // 將 el-scrollbar 的 wrap 對象找出來，指定給 scroll-container 
  }
}

最后實驗一下，成功了。但是為什么 scroll-container 沒有能自動匹配到 el-scrollbar 的 wrap 呢？我猜應(yīng)該和 vue 的渲染有關(guān)吧，可能是 el-scrollbar 的 wrap 是在渲染過程中生成的，并沒有直接體現(xiàn)在代碼的字面量上面，所以渲染 el-image 的時候， el-image 不知道 el-scrollbar 有一個 overflow 值為 auto 或 scroll 的 wrap 子元素存在，我還沒有專門研究過這渲染的過程，后面有時間再研究一下，看看我猜的對不對 ^_