判斷元素是否可以滾動scroll

2021-07-15 20:44:40 字數 1239 閱讀 3106

因為要做類似於微博的懶載入功能,所以要寫乙個懶載入元件lazyload.js。寫的過程中,有乙個很坑的問題:比如一般監聽整個body頁面的lazyload,則需要監聽window.onscroll事件。如果每屏載入10條資料,但是電腦螢幕大了,10條資料也沒有佔滿螢幕,此時就沒法觸發body的滾動,就沒法載入後面的資料了。此時,我需要每次請求完資料後判斷一下,要監聽容器是否可以滾動,如果不可以滾動,則繼續請求資料。以下結論均在chrome下測試:

一開始想到的是判斷clientheight >= scrollheight 就可以了,但是chrome瀏覽器下,認為scrollheight最小也是clientheight。那麼此時問題來了。如果判斷元素是否可以滾動?

如果元素不能滾動,那給它設定了scrolltop = 1,再獲取scrolltop應該是0,這樣子就可以判斷了。但是沒想到有以下2個坑:

1. js**設定了scrolltop=1後,如果立馬獲取scrolltop則是1,但是在控制台裡面獲取scrolltop返回0。那麼得呼叫settimeout(fun,100)延遲獲取;

2. 獲取整個頁面的scrolltop,現在有多個屬性可以獲取:

window.scrolly:ie下沒有,chrome有

window.pageyoffset:ie高版本有,chrome有

document.body.scrolltop:ie下始終是0,chrome下有值

document.documentelement.scrolltop:ie下有值,chrome下始終是0

其中,設定window.scrolly和window.pageyoffset,頁面

不會滾動到指定值。而且這兩個值

互不相干:

那麼整個頁面的scrolltop,只能通過以下來獲取:

math.max(document.documentelement.scrolltop,document.body.scrolltop);
綜上所述:判斷元素是否可以滾動的方法如下:

if(!this.filter())

var curtop = this.getscrolltop();

if(curtop > 0)elseelse

},this),100);

}

請在 lazyload.js裡檢視上述**

判斷元素是否有滾動條

因為出現滾動條便意味著元素空間將大於其內容顯示區域,根據這個現象便可以得到判斷是否出現滾動條的規則.el.scrollheight el.clientheightscrollheight 指的是元素的內容高度,即如果有滾動條,它的值會等於內容實際的高度加padding值 並不包含border和mar...

判斷是否可以關燈

description 給你 n 個開關和 m 個燈。第 i 個開關開啟某一些燈。該資訊以矩陣形式 n 行 m 列 如果第 i 個開關能開啟第 j 個燈,則 a ij 1,如果不能開啟則 a ij 0 最初,所有 m 燈都關閉。開關狀態僅能從 關 變為 開 這意味著如果兩個或更多開關連線到同乙個燈,...

iOS 判斷UITableView是否滾動在最底部

ios 根據判斷uitableview或者uiscrollview是否滾動在最底部,然後對接收到的資訊進行處理,判斷新訊息來的時候是否滾動,提公升使用者體驗。objc view plain copy void scrollviewdidscroll uiscrollview scrollview e...