在视区上显示聚焦的DIV&使用纯普通JavaScript在滚动时隐藏未聚焦的DIV

Question

我正在使用纯普通JavaScript创建一个HTML表单，其效果与SurveyMonkey.com/r/online-product-feedbed-survey-template-new类似

我想实现的是让我的表单题的不透明度变轻，让一个屏幕上的题不透明度：0；以便在上下滚动时,从用户获得焦点并使该表单的所有其他问题变暗,这将是完全可见的。

为此，我尝试了我的代码后，从不同的资源得到不同的提示，在这里我分享它。检查我的工作的带电工作JSFIDDLE和编辑它在那里。

HTML

<form>
    <div class="questionDIV overlay">
        <h3>Question # 1) Our purpose / vision / mission / values reflect delivering value for all stakeholders...</h3>
        <p><label class="container">Yes<input type="radio" name="1" value="Yes"><span class="radiomark"></span></label></p>
        <p><label class="container">No<input type="radio" name="1" value="No"><span class="radiomark"></span></label></p>
        <p><label class="container">Partially<input type="radio" name="1" value="Partially"><span class="radiomark"></span></label></p>
    </div>
    <div class="questionDIV overlay">
        <h3>Question # 1) Our purpose / vision / mission / values reflect delivering value for all stakeholders...</h3>
        <p><label class="container">Yes<input type="radio" name="1" value="Yes"><span class="radiomark"></span></label></p>
        <p><label class="container">No<input type="radio" name="1" value="No"><span class="radiomark"></span></label></p>
        <p><label class="container">Partially<input type="radio" name="1" value="Partially"><span class="radiomark"></span></label></p>
    </div>
    <div class="questionDIV overlay">
        <h3>Question # 1) Our purpose / vision / mission / values reflect delivering value for all stakeholders...</h3>
        <p><label class="container">Yes<input type="radio" name="1" value="Yes"><span class="radiomark"></span></label></p>
        <p><label class="container">No<input type="radio" name="1" value="No"><span class="radiomark"></span></label></p>
        <p><label class="container">Partially<input type="radio" name="1" value="Partially"><span class="radiomark"></span></label></p>
    </div>
    <div class="questionDIV overlay">
        <h3>Question # 1) Our purpose / vision / mission / values reflect delivering value for all stakeholders...</h3>
        <p><label class="container">Yes<input type="checkbox" name="1" value="Yes"><span class="checkmark"></span></label></p>
        <p><label class="container">No<input type="checkbox" name="1" value="No"><span class="checkmark"></span></label></p>
        <p><label class="container">Partially<input type="checkbox" name="1" value="Partially"><span class="checkmark"></span></label></p>
    </div>
    <div class="questionDIV overlay">
        <h3>Question # 1) Our purpose / vision / mission / values reflect delivering value for all stakeholders...</h3>
        <p><label class="container">Yes<input type="checkbox" name="1" value="Yes"><span class="checkmark"></span></label></p>
        <p><label class="container">No<input type="checkbox" name="1" value="No"><span class="checkmark"></span></label></p>
        <p><label class="container">Partially<input type="checkbox" name="1" value="Partially"><span class="checkmark"></span></label></p>
    </div>
    <div class="questionDIV overlay">
        <h3>Question # 1) Our purpose / vision / mission / values reflect delivering value for all stakeholders...</h3>
        <p><label class="container">Yes<input type="checkbox" name="1" value="Yes"><span class="checkmark"></span></label></p>
        <p><label class="container">No<input type="checkbox" name="1" value="No"><span class="checkmark"></span></label></p>
        <p><label class="container">Partially<input type="checkbox" name="1" value="Partially"><span class="checkmark"></span></label></p>
    </div>
</form>

CSS

.overlay {opacity:0.2}

JavaScript

//Example from https://www.javascripttutorial.net/sample/dom/event/visible-viewport/index.html
function isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)

    );
}

const box = document.querySelector('.questionDIV');

document.addEventListener('scroll', function () {
   if (isInViewport(box) ==  true) {
        document.querySelector('.questionDIV').classList.remove("overlay");
   } else {
        document.querySelector('.questionDIV').classList.add("overlay");
   }

}, {
    passive: true
});

Answer 1

主要问题在于您的“.QuestionDiv”选择器方法。

Document.QuerySelector只返回它找到的第一次出现。第一个之后的所有块永远不会被“isInviewPort”评估。

您需要获得所有问题容器的列表，并在滚动事件期间对它们进行迭代。像这样：

const box = document.querySelectorAll('.questionDIV');
document.addEventListener('scroll', function () {
for(let i = 0; i < box.length;i++){
console.log(box[i]);
console.log(isInViewport(box[i]));
   if (isInViewport(box[i]) ==  true) {
        box[i].classList.remove("overlay");
   } else {
        box[i].classList.add("overlay");
   }
}


}, {
    passive: true
});

之后，您只需要微调代码，以确保每次只有一个问题是活动的。在此处编辑了JSFIDDLE