Javascript 滚动事件添加 class

Question

大家好，我遇到了滚动事件的问题：

当该部分在视口中（可见）时，我想向某些 link 添加 class，但问题是如果我的滚动位置在 selected range 之间（在 if statement 中）一切正常 class 已添加到 link。但是，如果我连续滚动到下一部分，则会无限添加 class。我如何才能在 if statement 为真时添加它（滚动位置在 selected range 之间）？

// Element position
  const attractionSectionPos = Math.floor(ui.attractions_section.getBoundingClientRect().top);

// For intro section
  if(attractionSectionPos <= 250 && attractionSectionPos >= -450) {

    // Remove the active link if we have more than one
    document.querySelectorAll('.active').forEach(link => link.classList.remove('active'));
                
    // Add the class when section is in viewport
    document.querySelector('[data-link="attractions"]').classList.add('active');

    // Prevent default so we only add the class once
    e.preventDefault();

  // Remove the class if section is not in viewport
  } else { document.querySelector('[data-link="attractions"]').classList.remove('active') }

如果我添加 e.preventDefault() 它会给我一堆错误。

例如：Uncaught TypeError: e.preventDefault is not a function

This is how my console looks

Answer 1

我在 if statement 添加了以下内容：

!document.querySelector('[data-link="attractions"]').classList.contains('active')

现在一切顺利，当 section 在 viewport

中时，只添加一次 class

Javascript 滚动事件添加 class

Javascript scroll event adding class

javascript

scroll

position

hyperlink

viewport