猿问

position/getboundingclientrect 中的部分

我正在尝试获取部分在视口中的位置并向它们添加活动类，但代码不起作用。任何人都可以帮忙吗？


// Get the position of the sections in viewport


function isInViewport(element) {

    const rect = element.getBoundingClientRect();

    return (

      rect.top >= 0 &&

      rect.left >= 0 &&

      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&

      rect.right <= (window.innerWidth || document.documentElement.clientWidth)

    );

  }


//add active class to sections in viewport

 function setActiveClass(){

    for (let i=0; i <= sectionsArr.length; i++){

        if (isInViewport(sections[i])){

            sections[i].classList.add("your-active-class");

        }else{

            sections[i].classList.remove("your-active-class");

        }

    }

}


吃鸡游戏
浏览 110回答 1
1回答

MMTTMM

let sections = document.querySelectorAll("section");let sectionsArr = Array.from(sections);function isInViewport(element) {&nbsp; &nbsp; const rect = element.getBoundingClientRect();&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; rect.top >= 0 &&&nbsp; &nbsp; &nbsp; rect.left >= 0 &&&nbsp; &nbsp; &nbsp; rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&&nbsp; &nbsp; &nbsp; rect.right <= (window.innerWidth || document.documentElement.clientWidth)&nbsp; &nbsp; );&nbsp; }&nbsp;function setActiveClass(){&nbsp; &nbsp; for (let i=0; i < sectionsArr.length; i++){&nbsp; &nbsp; &nbsp; &nbsp; if (isInViewport(sectionsArr[i])){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sectionsArr[i].classList.add("your-active-class");&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sectionsArr[i].classList.remove("your-active-class");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}body{&nbsp; &nbsp; margin:0;}.filler{&nbsp; &nbsp; width:100vw;&nbsp; &nbsp; height:100vh;&nbsp; &nbsp; background:#db9292;&nbsp; &nbsp; display:flex;&nbsp; &nbsp; align-items:center;&nbsp; &nbsp; justify-content:center;}.your-active-class{&nbsp; background:red;}<!DOCTYPE html><html><head>&nbsp; &nbsp;<meta charset="UTF-8">&nbsp; &nbsp;<meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; &nbsp;<title>Document</title>&nbsp; &nbsp;<link rel="stylesheet" href="style.css"></head><body>&nbsp; &nbsp;<div class="filler">&nbsp; &nbsp; <p class="button" onclick="setActiveClass()" >Click me!</div>&nbsp; &nbsp;</div>&nbsp; &nbsp; <section class="secs">Section1</section>&nbsp; &nbsp; <section class="secs">Section2</section>&nbsp; &nbsp; <section class="secs">Section3</section>&nbsp; &nbsp; <section class="secs">Section4</section>&nbsp; &nbsp;<script src="index.js"></script></body></html>我猜你应该在 for 循环中将你的“sections[i]”更改为“sectionsArr[i]”并将“i <= sectionsArr.length”更改为仅“i <sectionsArr.length”function setActiveClass(){&nbsp; &nbsp; for (let i=0; i < sectionsArr.length; i++){&nbsp; &nbsp; &nbsp; &nbsp; if (isInViewport(sectionsArr[i])){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sectionsArr[i].classList.add("your-active-class");&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sectionsArr[i].classList.remove("your-active-class");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答