問(wèn)題

當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true，以后再次出現(xiàn)不做任何處理。

第一種情況：目標(biāo)元素有多個(gè)

預(yù)覽地址
控制臺(tái)輸出結(jié)果：

image.png

當(dāng)窗口滾動(dòng)時(shí)，這三個(gè)目標(biāo)出現(xiàn)在可視范圍內(nèi)會(huì)在控制臺(tái)打印出它的文本內(nèi)容和true ，并且不管窗口怎么滾動(dòng)只打印一次。

JS部分：

$(window).scroll(function () {
    $node.each(function(){  //  用的時(shí)候把這里的$node替換成目標(biāo)就可以了，上面鏈接里是$('.test')
           if (isVisible($(this)) && ($(this).data('shown')) !== 'true') {
               // 如果元素在窗口可視范圍，并且自定義屬性shown 的值不為true的時(shí)候，說(shuō)明之前沒(méi)有出現(xiàn)過(guò)，可以打印true
               console.log($(this).text()+':true');
               $(this).data('shown','true') //  元素在窗口可視范圍出現(xiàn)后，我們給她加個(gè)自定義屬性，做個(gè)標(biāo)記
       }
    });

});  //  每次滑動(dòng)，函數(shù)都會(huì)執(zhí)行

function isVisible($node) {  //  判斷元素是否在可視范圍內(nèi)
    var $nodePosition = $node.offset().top;
    var $scrollDistance = $(window).scrollTop();
    var $windowHeight = $(window).height();
    if (($nodePosition >= $scrollDistance) && ($nodePosition <= ($scrollDistance + $windowHeight))) {
        return true
    }
    return false
}

看到這個(gè)要求的時(shí)候，第一反應(yīng)是這還不簡(jiǎn)單嗎，加個(gè)狀態(tài)鎖就行了，可是實(shí)際操作并不行。于是就有了下面的第二種情況。

第二種情況： 目標(biāo)元素只有一個(gè)

我們將JS部分改成如下代碼，其他代碼不變：

$(window).scroll(function () {
    $($('.test')).each(function(){
       if (isVisible($(this))&& shown !== true){
         console.log('true');
         console.log($(this).text()+':true');
         shown = true;  //  元素出現(xiàn)后，上鎖
       }
    });

});  //  每次滑動(dòng)，函數(shù)都會(huì)執(zhí)行

var shown = false;  // 狀態(tài)鎖
function isVisible($node) {
    var $nodePosition = $node.offset().top;
    var $scrollDistance = $(window).scrollTop();
    var $windowHeight = $(window).height();
    if (($nodePosition >= $scrollDistance) && ($nodePosition <= ($scrollDistance + $windowHeight))) {
        return true;
    }
    return false;
}

控制臺(tái)輸出結(jié)果：

image.png

不管怎么滾動(dòng)窗口，都只提醒一個(gè)元素一次，當(dāng)對(duì)第一個(gè)出現(xiàn)的目標(biāo)元素執(zhí)行函數(shù)后，shown的值就改變了，這個(gè)鎖就鎖上了.....

總結(jié)

要想對(duì)多個(gè)目標(biāo)元素生效，就得想辦法給出現(xiàn)過(guò)的元素添加一個(gè)她獨(dú)有的標(biāo)記，然后通過(guò)檢查當(dāng)前元素是否有這個(gè)獨(dú)有的標(biāo)記來(lái)判斷她是否出現(xiàn)過(guò)。

就醬，如果有人剛好看到這個(gè)，剛好有其他的辦法，歡迎交流~