場景

? ? ? ? 在這兩天的開發任務中遇到了一個很奇葩的問題，并且它是偶發性的，大致情況是在某些電腦上，elementUI無線滾動總是正常執行的，但是在個別電腦上會出現偶發無線滾動不觸發的情況，在經過大量的場景模擬下發現，出現無線滾動不觸發的情況大致和渲染時間的長短有關（猜想，因為我確實沒有模擬出必現的情況）。

解決方式

? ? ? ? 解決方式是以無線滾動作為主要的數據加載方式，同時判斷如果無限滾動未觸發，并且頁面數據加載未完成，則使用滾動條觸底事件作為備用數據加載方式。

代碼實現

infinite-scroll-disabled：是否禁用

infinite-scroll-delay：節流時延

infinite-scroll-distance：觸發加載的距離閾值

infinite-scroll-immediate：是否立即執行加載方法，以防初始狀態下內容無法撐滿容器。

// 滾動條在listArea上
<div ref="listArea">
    <div v-infinite-scroll="queryList"
        :infinite-scroll-delay="10"
        infinite-scroll-distance="300"
        :infinite-scroll-immediate="'false'"
        :infinite-scroll-disabled="loading||allLoaded||requestFail">
        <div v-for="(item, index) in tableList">
            {{item:index}}
        </div>
    <div>
</div>

mounted () {
    // 必須使用nextTick獲取DOM，否則你可能拿不到它
    this.$nextTick(()=>{
        this.$refs.listArea.addEventListener('scroll',this.handleScroll,true);
    });
},
beforeDestroy () {
    // 所有的監聽事件、定時器等必須在頁面卸載后進行移除，否則可能會造成不可預知的錯誤，如：內存泄漏
    // 移除監聽事件
    this.$refs.listArea.removeEventListener('scroll', this.handleScroll);
},
methods:{
    handleScroll (e){
        //滾動條滾動時，距離頂部的距離
        const scrollTop = e.target.scrollTop;
        //可視區的高度
        const windowHeight = e.target.clientHeight;
        //滾動條的總高度
        const scrollHeight = e.target.scrollHeight;
        //滾動條到底部的條件
        if(scrollTop+windowHeight===scrollHeight){
            // 判斷數據是否加載完成、是否正在加載
            if (!this.allLoaded && !this.loading){
                // 獲取數據方法
                // 在請求數據方法中，將loading修改為true，防止重復觸發
                // 在情書數據結束后，將loading修改為false
                // 在所有數據請求完成后，將allLoaded修改為true 
                this.queryList();
            }
        }
    },
}

問題

頁面存在其他滾動條時，其他滾動條觸底也會觸發數據請求方法

解決方法：將監聽事件綁定到你需要觸發滾動條觸底的div上，而不是綁定在window上，代碼就不貼了，沒啥大變化。