使用 Pure Vanilla JavaScript 在视口上显示焦点 DIV 并在滚动时隐藏非焦点 DIV

Question

我正在使用 Pure Vanilla JavaScript 创建 HTML 表单，其效果与在 SurveyMonkey 表单上的效果相同，例如 https://www.surveymonkey.com/r/Online-Product-Feedback-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
});

之后，您只需微调代码以确保一次只有一个问题处于活动状态。编辑JSFIDDLEhere