在 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 子元素存在，我還沒有專門研究過這渲染的過程乾闰，后面有時間再研究一下，看看我猜的對不對 _
