原生JS實現下拉載入

2021-08-15 01:14:59 字數 967 閱讀 9477

tips:實現的原理是通過獲取①獲取滾動條當前的位置②獲取當前可視範圍的高度 ③獲取文件完整的高度

(一)獲取滾動條當前的位置

//獲取滾動條當前的位置

function getscrolltop() else if(document.body)

return scrolltop;

}

#####(二)獲取當前可視範圍的高度

//獲取當前可視範圍的高度  

function getclientheight() else

return clientheight;

}

tips:math.min是兩個值取最小的值,math.max則相反。

#####(三)獲取文件完整的高度

//獲取文件完整的高度 

function getscrollheight()

#####(四)實現下拉重新整理

//滾動事件觸發

window.onscroll = function()

}

tips:如果想距離底部50px就執行重新整理,請將if條件改為getscrolltop() + getclientheight()+50> getscrollheight()即可實現。

#####(五)獲取頁面元素的位置

var wraptop =document.getelementbyid('scrollwrap')

console.log(wraptop.scrolltop + " " + "滾動條當前的位置")

console.log(wraptop.scrollheight + " " + "獲取滾動條的高度")

tips:對應的上下左右以及寬高修改一下屬性即可,就不一一羅列了。

原生JS實現下拉選項效果

html 愛好學習 js function hasclassname targetparentnode,active removeclass targetparentnode,active addclass targetparentnode,active 獲取所有兄弟元素 function sibl...

實現下拉滾動載入

下拉滾動載入 首先,如果你本身需要滾動載入的塊是隱藏的,那麼就等他顯示在監聽滾動事件,否則直接在mounted裡面監聽就可以了 定義監聽事件 const sealpopover document.queryselector choose seal content.seal box sealpopov...

iscroll5實現下拉載入更多

2 提取iscroll probe.js,選擇這個檔案的原因是我們要給iscroll擴充套件乙個事件,需要用到probetype 屬性 3 修改iscroll probe.js的原始碼,新增上拉監聽事件slideup iscroll 5 原始碼注釋 4 編輯頁面 html 上拉載入更多 css po...