第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

IntersactionObserver() 僅觀察一行的第一個(gè)元素,而不是所有元素

IntersactionObserver() 僅觀察一行的第一個(gè)元素,而不是所有元素

MMMHUHU 2023-09-07 16:06:23
我正在嘗試 IntersectionObserver(),它的行為很奇怪:我使用一個(gè)非常簡單的布局,在同一個(gè) div 中只有 8 個(gè)圖像與 Flexbox,使用換行,所以基本上這 8 個(gè)圖像將自己定位在不同的行中,根據(jù)視口的大小。我首先將過濾器類(添加模糊過濾器)應(yīng)用于每個(gè)元素,然后在它們顯示在屏幕上時(shí)將其刪除:HTML:<div class="flex--cont">            <div class="box box-2">                <img src="img/1.jpg" alt="" class="img img-1">            </div>            <div class="box box-1">                <img src="img/2.jpg" alt="" class="img img-2">            </div>            <div class="box box-3">                <img src="img/3.jpg" alt="" class="img img-3">            </div>            <div class="box box-4">                <img src="img/4.jpg" alt="" class="img img-4">            </div>            <div class="box box-5">                <img src="img/5.jpg" alt="" class="img img-5">            </div>            <div class="box box-6">                <img src="img/6.jpg" alt="" class="img img-6">            </div>            <div class="box box-7">                <img src="img/7.jpg" alt="" class="img img-7">            </div>            <div class="box box-8">                <img src="img/8.jpg" alt="" class="img img-8">            </div>        </div>腳本語言const allImage = Array.from(document.querySelectorAll(".img"));allImage.forEach((img) => img.classList.add("filter"));const removeFilter = function (entries, observer) {  const [entry] = entries;  const image = entry.target;  image.classList.remove("filter");};const ImageObserver = new IntersectionObserver(removeFilter, {  root: null,  threshold: 0.15,});allImage.forEach((img) => ImageObserver.observe(img));問題是觀察者實(shí)際上只觀察每行的第一個(gè)元素,所以如果我有 2 行,它只會(huì)獲得第 1 和第 5 個(gè)圖像,如果我有 3 行,它會(huì)獲得第 1、第 4 和第 7 個(gè)圖像等等。我確實(shí)已將其應(yīng)用于所有圖像。它為什么要這么做?感謝您的回答!
查看完整描述

1 回答

?
冉冉說

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個(gè)贊

只有第一個(gè)發(fā)生了變化,因?yàn)檫@就是您通過僅解構(gòu)第一個(gè)數(shù)組元素來更改顏色函數(shù)的目標(biāo):


const [entry] = entries;


但是,InteractionObserver回調(diào)不是針對(duì)每個(gè)條目調(diào)用的,而是針對(duì)同時(shí)觸發(fā)的所有條目調(diào)用的;因此該entries數(shù)組包含所有被觀察的項(xiàng)目,您需要isIntersecting像這樣檢查屬性:


const changeColor = function(entries) {

  entries.forEach(entry => {

    if(entry.isIntersecting) {

      entry.target.style.background = 'blue';

    } else {

      entry.target.style.background = 'red';

    }

  })

}

來自 MDN 文檔


let callback = (entries, observer) => {

  entries.forEach(entry => {

    // Each entry describes an intersection change for one observed

    // target element:

    //   entry.boundingClientRect

    //   entry.intersectionRatio

    //   entry.intersectionRect

    //   entry.isIntersecting

    //   entry.rootBounds

    //   entry.target

    //   entry.time

  });

};


查看完整回答
反對(duì) 回復(fù) 2023-09-07
  • 1 回答
  • 0 關(guān)注
  • 103 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)