javascript - querySelectorAll && getBoundingClientRect
问题描述
我遇到了 JavaScript querySelectorAll () 方法的问题。
我想对两个段落(p)标签产生淡入淡出效果,它们最初的不透明度都设置为 0,并且 transform: translateY 的 15vh 将它们向下移动一点,我想要当段落出现在屏幕底部时,在用户向下滚动期间,返回不透明度 1 和 transform:translateY 为 0。
我创建了一个名为scrollAppear()的函数,在其中我有很多东西..
function scrollAppear()
首先,我有一个变量paragraphsToFade,其中包含两个带有“paragraphs_to_fade”类的段落;我使用 querySelectorAll 方法来获取具有类 (.paragraphs_to_fade) 的两个 (p) 标记。
这给我一个数组(nodeList)..
var paragraphsToFade=document.querySelectorAll(".paragraphs_to_fade");
然后我想访问段落的坐标 Y,为了实现这一点,我使用了getBoundingClientRect().top方法,在这种情况下,它返回指定元素相对于窗口顶部的顶部。
我将值存储在一个名为paragraphsPosition的变量中;
但是要获得两个 (p) 元素的坐标 Y,我必须循环到 for 循环中并指定 [i] 变量,该变量将把两个值放在循环迭代中,如下所示:
for (let i = 0; i < paragraphsToFade.length; i++) {
var paragraphsPosition=paragraphsToFade[i].getBoundingClientRect().top;
}
之后,我创建了一个名为 screenSize 的变量,它可以访问窗口 Height :
var screenSize=window.innerHeight;
然后我用 if/else 语句检查一个条件,检查元素的顶部值是否小于窗口的高度,如果为真,则添加类 fadeInAnimation,它将不透明度重置为 1 和变换: translateY 到 0,转换为 1,正如我在解释开始时指定的那样。
var screenSize=window.innerHeight;
if(paragraphsPosition < screenSize){
paragraphsToFade.classList.add("fadeInAnimation");
}
最后我只是调用函数滚动出现,当用户滚动窗口时:
window.addEventListener("scroll",scrollAppear);
我不知道为什么,但是当我使用 querySelector 并且我只有一个段落时,淡入淡出效果有效,但是当我使用 querySelectorAll 并且我想抓取多个段落时,它不起作用,也许我循环不好或者别的什么,我在不同的地方使用了 console.log 试图知道发生了什么,但我不明白为什么?
我在教程中看到了这种淡入淡出效果: https ://www.youtube.com/watch?v=C_JKlr4WKKs
解决方案
请参阅this fiddle,您将类附加到多个元素的对象,而不是每个元素本身。
当您遍历数组时,将类包含在 for 循环中的元素中
function scrollAppear(){
var paragraphsToFade = document.querySelectorAll(".paragraphs_to_fade");
var paragraphsPosition;
for (let i = 0; i < paragraphsToFade.length; i++) {
paragraphsPosition=paragraphsToFade[i].getBoundingClientRect().top;
var screenSize=window.innerHeight;
if(paragraphsPosition < screenSize && !paragraphsToFade[i].classList.contains("fadeInAnimation") ){
paragraphsToFade[i].classList.add("fadeInAnimation");
console.log('added class');
}
}
}
window.addEventListener("scroll",scrollAppear);
推荐阅读
- python - 从()中提取特定信息的最简单方法是什么?
- android - 如何打开 Native Android App 中的数据并将其传递给 Flutter Android App?
- android - Android 应用:用户通过 Intent.ACTION_GET_CONTENT 选择 CSV 文件。然后如何将此 CSV 文件导入到 sqlite 数据库表中?
- reactjs - 有没有办法使用 axios 将图像上传到 Firebase 并从中加载?
- python - 如何在 Python 中根据需要编写文件段落?
- python - 在没有 Jupyter Notebook 的情况下使用 Kepler GL
- android - 如何修复找不到以下类:-android.support.design.widget.BottomNavigationView
- java - 发送发布请求抛出 500 内部错误
- swiftui - AppDelegate 和 ContentView() 之间的 SwiftUI 通信
- javascript - 使用下拉菜单过滤价格范围