IntersectionObserver監聽容器元素

時間 2019-11-11

標籤 intersectionobserver 監聽容器元素简体版

原文原文鏈接

IntersectionObserver是Chrome 51+已經支持的API，用來檢測目標元素是否處於root容器之中。
以前咱們在作懶加載的時候，一般都是監聽瀏覽器scroll事件，而後根據元素位置是否處於可視窗口來作的，這種方式有個弊端就是，頁面在監聽scroll滾動的時候會致使頁面加載不流暢。
使用IntersectionObserverAPI就能夠避免這種狀況，達到平滑加載的目的，而且能夠根據threshold來定義回掉函數在何時觸發，更加的簡單準確。javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .container{
        width: 1100px;
        margin: 0 auto;
    }
    .test_model{
        height: 300px;
        width: 300px;
        margin-top: 1200px;
        background-color: red;
        margin-bottom: 600px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="test_model" id="model"></div>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            var obs = new IntersectionObserver((changes)=>{
                changes.forEach(change => console.log(change.intersectionRatio.toFixed(2)))
            },{
                threshold: [0, 0.25, 0.5, 0.75, 1]
            });
            obs.observe(document.getElementById('model'));
        };
    </script>
</body>
</html>

IntersectionObserver有observe,unobserve,disconnect等三個方法，分別指綁定觀察對象、中止觀測、關閉觀察器。
IntersectionObserver(callbakc,opts)接受兩個參數,第一個參數爲回調函數,在檢測目標根據opts裏面的threshold內容來觸發。css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。