在使用elementUI組件庫的時候，用到了無限滾動這個功能。我沒有看源碼，直接在網上學習了下實現的思路，然后自己手動編碼以下。在此總結下。

假設頁面上有一個盒子容器，容器內有一些子元素。容器的高度是固定的，有縱向滾動條。怎么做到滾動到底部的時候，就能觸發事件查詢數據呢？

用圖形的形式分析下：

image.png

知道思路后，我們就是想辦法用代碼的形式實現它即可。

js

子元素總高度 scrollHeight

可視區域高度 clientHeight

滾動條縱向偏移量 scrollTop

我把代碼貼上來,因為是vue技術棧，所以在vue環境開發，cdn引入即可。(還有個原因是，vue用多了之后，原生js操作dom不太會寫了，尷尬￣□￣｜｜)

無限滾動

#div1 {

width: 500px;

height: 400px;

margin: 50px auto;

overflow-y: scroll;

}

.p1 {

height: 40px;

line-height: 40px;

margin: 5px 0;

background-color: #409EFF;

color: white;

font-size: 16px;

text-align: center;

}

#div1::-webkit-scrollbar {/*滾動條整體樣式*/

width: 10px; /*高寬分別對應橫豎滾動條的尺寸*/

height: 10px;

scrollbar-arrow-color:rgba(0,0,0,0.2);

}

#div1::-webkit-scrollbar-thumb {/*滾動條里面小方塊*/

border-radius: 5px;

-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

background: pink;

scrollbar-arrow-color:rgba(0,0,0,0.2);

}

#div1::-webkit-scrollbar-track {/*滾動條里面軌道*/

-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

border-radius: 0;

background: white;

}

new Vue({

el: '#app',

data: {

list: []

},

created() {

for (let i = 1; i <= 10; i++) {

this.list.push("第"+i+"條數據");

}

},

methods: {

scrollCb() {

// 首先找出子元素總高度 scrollHeight

// 再找出可視區域高度 clientHeight

// 滾動條縱向偏移量 scrollTop

// 當 總高 - 可視區域高度 - 縱向偏移量 < 某個最小閾值 的時候，觸發無限滾動

const dom = document.getElementById("div1");

const totalHeight = dom.scrollHeight;

const clientHeight = dom.clientHeight;

const scrollTop = dom.scrollTop;

if (totalHeight - clientHeight - scrollTop < 20) {

this.addList();

}

},

addList() {

this.list.push("無限滾動觸發");

for (let i = 1; i <= 10; i++) {

this.list.push("第" + i + "條數據");

}

}

}

})

上面的樣式無所謂啦，無非是想做的好看點，可能前端都這樣吧。效果是這樣的，每次滾動到列表底部時，就會增加列表元素。

image.png

進階下：

在vue中有自定義指令這個鬼東西，elementUI提供的無限滾動也是個自定義指令。我試著將其寫成自定義指令的形式。

樣式等都是一樣的，只是邏輯改了下，采用自定義指令實現

new Vue({

el: '#app',

data: {

list: []

},

created() {

for (let i = 1; i <= 10; i++) {

this.list.push("第"+i+"條數據");

}

},

directives: {

infiniteScroll: {

bind(el, binding, vNode) {

el.onscroll = () => {

const totalHeight = el.scrollHeight;

const clientHeight = el.clientHeight;

const scrollTop = el.scrollTop;

if (totalHeight - clientHeight - scrollTop < 20) {

vNode.context.addList(); // vNode.context指向當前vue實例

}

};

}

}

},

methods: {

addList() {

this.list.push("無限滾動觸發");

for (let i = 1; i <= 10; i++) {

this.list.push("第" + i + "條數據");

}

}

}

})

效果和第一個方法是一樣的。(還有用vnode上報事件的方法，下次寫)

這樣，我就簡單實現了一個向下的無限滾動功能。學習一個東西的時候，最好自己嘗試找解決方法。如果找不到再學習別人的，重要的是理解思路，而不是死記硬背代碼，這樣才能記得牢固。

總結

以上是生活随笔為你收集整理的无限滚动重置服务器,简单无限滚动的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。