CSS進入屏幕后執(zhí)行,是指當一個元素進入瀏覽器可視窗口后,會觸發(fā)特定的事件或樣式效果。這些效果可以通過CSS的偽類和js的事件監(jiān)聽來實現(xiàn)。
/*CSS偽類*/ /*當元素完全進入瀏覽器可視窗口后執(zhí)行*/ .your-class:in-view{ animation: your-animation 1s ease-in-out; } /*當元素部分進入瀏覽器可視窗口后執(zhí)行*/ .your-class:in-partial-view{ opacity: 0.5; } /*JS事件監(jiān)聽*/ /*當元素進入瀏覽器可視窗口后執(zhí)行*/ window.addEventListener('scroll', function(){ var elem = document.querySelector('.your-class'); var position = elem.getBoundingClientRect(); if(position.top >= 0 && position.left >= 0 && position.bottom<= window.innerHeight && position.right<= window.innerWidth){ //執(zhí)行你的代碼 } }); /*當元素完全進入瀏覽器可視窗口后執(zhí)行*/ window.addEventListener('scroll', function(){ var elem = document.querySelector('.your-class'); var position = elem.getBoundingClientRect(); if(position.top >= 0 && position.left >= 0 && position.bottom<= window.innerHeight && position.right<= window.innerWidth && position.bottom >0 && position.top< window.innerHeight){ //執(zhí)行你的代碼 } });
以上代碼實現(xiàn)了當元素進入瀏覽器可視窗口后執(zhí)行CSS動畫或改變元素不透明度的效果。同時,通過js監(jiān)聽瀏覽器滾動事件,實現(xiàn)了元素進入屏幕后執(zhí)行自定義代碼的效果。