在 el-scrollbar 中使用 el-image 懒加载，按照官方文档描述的，在不指定 scroll-container 的情况下，它会自动匹配最近一个 overflow 值为 auto 或 scroll 的父元素，信以为然的就没有管 scroll-container 的配置，结果……我把滚动条滚烂了应该懒加载的图片都没有加载出来！！！！！
以为是一个 bug ？换用 div 标签，设置为可滚动，应该懒加载的图片又是正常加载出来了……网上搜寻资料，木有盆友发表相关资料，好吧自己来吧……
官方文档描述，可以使用 scroll-container 指定监听 scroll 事件的容器，值类型为 string / HTMLElement ，然后就没有了，感觉描述的太简单了，也没有示例代码。HTMLElement 类型倒能理解是什么意思，但是 string 类型没有琢磨出来。那就给指定一个 HTMLElement 吧。
HTMLElement 指的是 DOM 对象，也就是说可以给 scroll-container 指定一个 overflow 值为 auto 或 scroll 的 DOM 对象。我们先分析一下 el-scrollbar （如果你已经了解它的结构，就当我没说这句话），它是由最外层组件层（el-scrollbar）、内容包裹容器（wrap）、水平/垂直滚动条组成，内容溢出需要滚动就发生在内容包裹容器上面，所以我们要给 scroll-container 指定的 HTMLElement 应该就是它了，让我们试试吧。
文档结构
<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 呢？我猜应该和 vue 的渲染有关吧，可能是 el-scrollbar 的 wrap 是在渲染过程中生成的，并没有直接体现在代码的字面量上面，所以渲染 el-image 的时候， el-image 不知道 el-scrollbar 有一个 overflow 值为 auto 或 scroll 的 wrap 子元素存在，我还没有专门研究过这渲染的过程，后面有时间再研究一下，看看我猜的对不对 _
