在视口上显示聚焦DIV&；使用纯香草JavaScript在滚动时隐藏未聚焦的div

我使用纯香草JavaScript创建一个HTML表单，其效果与SurveyMonkey表单相同，例如

我想要实现的是使我的表单问题的不透明度变轻，并使屏幕上的一个问题不透明度为：0；因此，当用户上下滚动时，它将完全可见，以获得焦点，并使该表单中的所有其他问题变暗，与上面的示例相同

为此，我在从不同的资源获得不同的提示后尝试了我的代码，我在这里分享它。查看我的作品的实时工作，并在那里进行编辑

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>

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
});

//来自的示例https://www.javascripttutorial.net/sample/dom/event/visible-viewport/index.html
函数isInViewport（el）{
const rect=el.getBoundingClientRect（）；
返回(
rect.top>=0&&
rect.left>=0&&
rect.bottom主要问题在于“.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
});

const-box=document.querySelectorAll（'.questionDIV'）；
document.addEventListener（'scroll'，函数（）{
for（设i=0；i

在此之后，您只需微调代码，以确保一次只有一个问题处于活动状态。已编辑的JSFIDLE
完美。非常感谢您指出我的错误并加以纠正。--您能按照我的要求进行修改吗？如问题中所述，表示只有一个（中间一个）即使在视口中出现2-3个div，也应该完全可见。我如何实现它？您需要在“isInViewport”函数中定义偏移量，并将计算限制在屏幕的一小部分（我用静态偏移量示例编辑了我的小提琴，因此您可以查看）。谢谢。现在我将尝试使它只显示一个中间DIV rest hide all。只需根据问题更改下面的函数即可实现---函数isInViewport（el）{const rect=el.getBoundingClientRect（）；return（rect.top>=（（window.innerHeight/2）-（el.clientHeight））&&rect.left>=0&&rect.bottom
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
});