scroll没有绑定,我被卡住了

oxalkeyp  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(528)
  1. var id = document.querySelector("#arrowUp");
  2. var arrowUp = window.pageYOffset >= 5;
  3. console.log(arrowUp);
  4. id.classList.toggle("arrowUp", arrowUp);
  5. id.addEventListener('click', function() {
  6. window.scrollTo(0, 0);
  7. })

我试图在基于滚动的特定html中插入一个类,但问题是代码的这一部分:

  1. var arrowUp = window.pageYOffset >= 5;

它不会根据滚动和条件动态地变为真或假 window.pageYOffset >= 5; 现在不是动态的true或false。因此,预期的类不会被插入/删除。
如何将这部分代码绑定到scroll事件

rvpgvaaj

rvpgvaaj1#

添加 EventListener 用于滚动事件。

  1. var id = document.querySelector("#arrowUp");
  2. id.addEventListener('click', function() {
  3. window.scrollTo(0, 0);
  4. })
  5. window.addEventListener('scroll', function() {
  6. var arrowUp = window.pageYOffset >= 5;
  7. if (arrowUp == true) {
  8. id.classList.add('visible');
  9. } else {
  10. id.classList.remove('visible');
  11. }
  12. })
2jcobegt

2jcobegt2#

您不能“动态”执行此操作, window.pageYOffset 不是一个神奇的动态变量,它是一个getter(不带参数的函数,用于检索某些值)
为了使其工作,您必须检查每个滚动事件的条件是否为真。

  1. var id = document.querySelector("#arrowUp");
  2. document.addEventListener("scroll", function() {
  3. var arrowUp = window.pageYOffset >= 5;
  4. console.log(arrowUp);
  5. id.classList.toggle("arrowUp", arrowUp);
  6. });
  7. id.addEventListener('click', function() {
  8. window.scrollTo(0, 0);
  9. });

相关问题