scrollTop 瀑布流的關鍵點 offsetTop

cheng10 發(fā)布于2019-08-23 15:59 / 2475人閱讀

摘要：瀑布流的關鍵點瀑布流的關鍵點在判斷是否到達頁面底部。最主要的一個參數(shù)就是看個圖，你就明白了只要滿足這個條件，就載入新內(nèi)容最后一個元素的上邊距窗口的高度文檔上卷的高度如果滿足條件，返回關于的測試，只有在才會變化，其它不無法獲取，一直是參考

scrollTop 瀑布流的關鍵點

瀑布流的關鍵點在判斷是否到達頁面底部。

scrollTop

最主要的一個參數(shù)就是 scrollTop

看個圖，你就明白了：只要滿足這個條件，就載入新內(nèi)容

function needLoadContent() {
    // 最后一個元素的上邊距
    let lastOffsetTop = document.querySelector(".list-item:last-child").offsetTop;
    
    // 窗口的高度
    let clientHeight = window.innerHeight;
    
    // 文檔上卷的高度
    let scrollTop = document.documentElement.scrollTop;
    
    // 如果滿足條件，返回 true 
    return (lastOffsetTop < clientHeight + scrollTop);
}

關于 scrollTop 的測試， scrollTop 只有在 document.documentElement 才會變化，其它不無法獲取，一直是 0

參考

云服務器 GPU云服務器 scrollTop offsetTop webrtc流的接收 java流的重定向

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102618.html

scrollTop 瀑布流的關鍵點 offsetTop

摘要：瀑布流的關鍵點瀑布流的關鍵點在判斷是否到達頁面底部。最主要的一個參數(shù)就是看個圖，你就明白了只要滿足這個條件，就載入新內(nèi)容最后一個元素的上邊距窗口的高度文檔上卷的高度如果滿足條件，返回關于的測試，只有在才會變化，其它不無法獲取，一直是參考 scrollTop 瀑布流的關鍵點瀑布流的關鍵點在判斷是否到達頁面底部。 scrollTop 最主要的一個參數(shù)就是 scrollTop 看個圖，你就...

ruicbAndroid 2019-08-02 14:31 評論0 收藏0
原生 JS 實現(xiàn)一個瀑布流插件

摘要：瀑布流布局中的圖片有一個核心特點等寬不定等高，瀑布流布局在國內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模的使用，比如花瓣網(wǎng)等等。那么接下來就基于這個特點開始瀑布流探索之旅。 showImg(https://segmentfault.com/img/remote/1460000013059759?w=640&h=280); 瀑布流布局中的圖片有一個核心特點 —— 等寬不定等高，瀑布流布局在國內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模...

Alfred 2019-08-30 13:52 評論0 收藏0
原生 JS 實現(xiàn)一個瀑布流插件

摘要：瀑布流布局中的圖片有一個核心特點等寬不定等高，瀑布流布局在國內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模的使用，比如花瓣網(wǎng)等等。那么接下來就基于這個特點開始瀑布流探索之旅。 showImg(https://segmentfault.com/img/remote/1460000013059759?w=640&h=280); 瀑布流布局中的圖片有一個核心特點 —— 等寬不定等高，瀑布流布局在國內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模...

lavnFan 2019-08-26 11:33 評論0 收藏0
原生 JS 實現(xiàn)一個瀑布流插件

摘要：瀑布流布局中的圖片有一個核心特點等寬不定等高，瀑布流布局在國內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模的使用，比如花瓣網(wǎng)等等。那么接下來就基于這個特點開始瀑布流探索之旅。 showImg(https://segmentfault.com/img/remote/1460000013059759?w=640&h=280); 瀑布流布局中的圖片有一個核心特點 —— 等寬不定等高，瀑布流布局在國內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模...

wenyiweb 2019-08-01 18:29 評論0 收藏0
jQuery實現(xiàn)瀑布流效果

摘要：何為瀑布流瀑布流，又稱瀑布流式布局。最早采用此布局的網(wǎng)站是，逐漸在國內(nèi)流行開來。四是服裝款式設計資訊平臺如看潮網(wǎng)等等。何為瀑布流：　　瀑布流，又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當前尾部。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國內(nèi)流行開來。國內(nèi)大多數(shù)清新站基本為這類風格。 ...

mumumu 2019-08-20 18:13 評論0 收藏0