亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

使用 Intersection Observer 切換活動類

使用 Intersection Observer 切換活動類

BIG陽 2023-09-14 20:20:53
我試圖在滾動頁面時更改我的部分的活動類。我正在使用 intersectionObserver,但感覺很受困。我需要從 activeId 獲取 activeElement 但不知道如何執行此操作。這是我的代碼: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條經驗 獲得超8個贊

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

使用 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>


查看完整回答
反對 回復 2023-09-14
  • 1 回答
  • 0 關注
  • 156 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號