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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 Intersection Observer 切換活動類

使用 Intersection Observer 切換活動類

BIG陽 2023-09-14 20:20:53
我試圖在滾動頁面時更改我的部分的活動類。我正在使用 intersectionObserver,但感覺很受困。我需要從 activeId 獲取 activeElement 但不知道如何執(zhí)行此操作。這是我的代碼:const options = {    threshold: 0.75}let observer = new IntersectionObserver(check, options);function check(entries) {    entries.forEach(entry => {        const activeId = entry.target.id;        const activeElement =     if(entry.isIntersecting){        activeElement.classList.toggle("your-active-class");    };});};sections.forEach(section => {    observer.observe(section);});
查看完整描述

1 回答

?
桃花長相依

TA貢獻1860條經(jīng)驗 獲得超8個贊

entry.isIntersecting直接用于classList.toggle()第二個(布爾)參數(shù)。

使用 options {threshold: 0},或者根本不使用,因為閾值默認為0

const check = (entries) => entries.forEach(entry => {

  entry.target.classList.toggle("is-active", entry.isIntersecting);

});


const Obs = new IntersectionObserver(check);

document.querySelectorAll("section").forEach(el => Obs.observe(el));

* {margin:0; box-sizing: border-box;}


section {

  min-height: 100vh;

  transition: 0.5s;

  transform: scale(0.4);

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 70vh;

}


.is-active {

  transform: scale(1);

}

<section style="background: #0bf;">1</section>

<section style="background: #f0b;">2</section>

<section style="background: #fb0;">3</section>

<section style="background: #0fb;">4</section>


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

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

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