瀏覽器觸底判斷與滾動節留

scrolltop + winheight >= docheight 觸底了

三個高度的獲取
let st =
window.pageyoffset ||
document.documentelement.scrolltop ||
document.body.scrolltop;
// 瀏覽器視窗（文件）的可視高度(windowheight)：（就是你肉眼可見的那部分全屏高度）
let windowheight =
window.innerheight ||
document.documentelement.clientheight ||
document.body.clientheight;
// 文件的真實高度(scrollheight)：
let scrollheight =
document.documentelement.scrollheight || document.body.scrollheight;

1.判斷瀏覽器滾動條是否到達底部，如果到達底部，則使用axios拉取資料

2.拉取成功後，更新資料

這裡採用了頭尾固定和中間高度自適應的布局方式,中間內容塊高度沒有設定，所以滾動條是在div的內容區域的，並不是在頁面上，然而中間內容區域出現乙個滾動條不是很好看，所以可以調整一下滾動條樣式

/*html***/ /*css***/ #dhead #dbody #dfoot /*滾動條樣式*/ /*定義滾動條高度及背景寬高分別對應橫豎滾動條的尺寸*/ ::webkit-scrollbar /*定義滾動條軌道，內陰影+圓角*/ ::webkit-scrollbar-track /*定義滑塊內陰影+圓角*/ ::webkit-scrollbar-thumb

是對元素的滾動監聽，專案中是中間內容的最外層元素，這裡碰到乙個坑就是對中間滾動元素監聽都無效，必須對中部內容塊的最外層元素監聽。需要獲取到元素的dom節點,在vue元件裡面使用的是原生js的監聽事件。

/*html*/
/*vue*/
methods:
// es5的合併陣列
// arr1.concat(arr2, arr3);
// es6的合併陣列
//[...arr1, ...arr2, ...arr3]
this.site=[...this.site,...arr]
this.loadingtip=false})
.catch(err=>)}}
}

發現乙個問題就是當瀏覽器到達底部時，會多次觸發函式，為了解決這個問題，進行函式節流。

瀏覽器中某些計算和處理要比其他的昂貴很多。例如，dom 操作比起非 dom 互動需要更多的記憶體和 cpu 時間。連續嘗試進行過多的 dom相關操作可能會導致瀏覽器掛起，有時候甚至會崩潰。尤其在 ie 中使用 onresize 事件處理程式的時候容易發生，當調整瀏覽器大小的時候，該事件會連續觸發。

在 onresize 事件處理程式內部如果嘗試進行 dom 操作，其高頻率的更改可能會讓瀏覽器崩潰。為了繞開這個問題，你可以使用定時器對該函式進行節流。

函式節流背後的基本思想是指，某些**不可以在沒有間斷的情況連續重複執行。第一次呼叫函式，建立乙個定時器，在指定的時間間隔之後執行**。當第二次呼叫該函式時，它會清除前一次的定時器並設定另乙個。如果前乙個定時器已經執行過了，這個操作就沒有任何意義。然而，如果前乙個定時器

尚未執行，其實就是將其替換為乙個新的定時器

在這個專案中，是這樣的

mounted(),
methods: else , delay);}}
},}

在拉取資料時，可能會有時間快取，在等待時間裡使用了乙個loading圖，轉圈的圓環，css3寫的簡單轉圈效果,乙個畫了270°的圓。使用了axios拉取資料，在**函式中隱藏loading緩衝，因為已經拉取完成了。

.loadingtip .loadingtip::before @keyframes loading 100%

}

唉，真的想哭，或許以後可以優化成更優雅的寫法

瀏覽器觸底判斷與滾動節留

Python Selenium 瀏覽器滾動

判斷瀏覽器

判斷瀏覽器

相關推薦