我正在使用纯普通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
});
主要问题在于您的“.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
