在原始 JS 的循环中仅触发一次 classLiss.add 事件

Question

各位。我可能有一个问题 well-know，但我也找不到解决方案，也在 WEB 中寻找它。我正在制作一个进度条，它在屏幕滚动期间显示 'title section' 中包含的部分。一切正常，除非我尝试添加 class（并删除它），因为我无法在 for-next 中仅触发一次事件环形。这是 HTLM 的一部分：

  <body>
    <div class="container">
      <section class="onTop">
        <nav>
            <div class="scroll-title">MENU</div>
          <div id="scroll-total">
            <div id="scroll-part"></div>
          </div>
        </nav>
      </section>
      <div class="wrapper">
        <div class="title">FIRST TITLE</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, aut quo blanditiis hic numquam, sapiente maiores id,
[etc.]

这里是 CSS 适用的部分：

.scroll-title{
  text-align: right;
  font-size: 10px;
  width: 15.5vh;
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  border: 1px solid red;
  transition: font-size .25s ease-out;
}
.scroll-title.action{
  font-size: 20px;
}

JS 代码将标题的高度引用放在一个数组中，然后检查滚动位置是否在某个部分内并移动栏。在那段时间里，代码更改了包含“scroll-title”class 的单个标题的 DIV。我的想法是添加一个 CSS class 来动画（使用 transition）标题。所以，我正在使用 addEventListener 添加和删除 class，但我只想触发此事件一次，但我找不到方法做吧。这是代码的一部分：

let titleScroll = document.querySelector('.scroll-title');
let band = document.getElementById('scroll-total');
let scroll = document.getElementById('scroll-part');
let pageTitlesRif =[], pageTitlesText =[];
let pageTitles = document.querySelectorAll('.wrapper .title');
pageTitlesRif  = [0];
pageTitlesText =['MENU'];
let rect;
let tot = band.offsetWidth;
      let totSide = bandSide.offsetHeight;
      for (var i = 0; i < pageTitles.length; i++) {
        rect = pageTitles[i].getBoundingClientRect();
        pageTitlesText.push(pageTitles[i].innerText);
        pageTitlesRif.push(rect.bottom + document.documentElement.scrollTop);
      }
      let scrollHeight = Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight,
        document.body.offsetHeight, document.documentElement.offsetHeight,
        document.body.clientHeight, document.documentElement.clientHeight
      );
      pageTitlesRif.push(scrollHeight);
      console.log(scrollHeight);

      window.onscroll = function() {
        for (var i = 1; i < pageTitlesRif.length; i++) {
          if (window.pageYOffset > pageTitlesRif[i - 1] && window.pageYOffset < pageTitlesRif[i]) {
            titleScroll.classList.add('action');
            let transitionEnd = whichTransitionEvent();
            titleScroll.addEventListener(transitionEnd, putClass, false);
            titleScroll.innerText = pageTitlesText[i - 1];
            scroll.style.left = (pageTitlesRif[i-1] * tot / scrollHeight).toString()+ 'px';
            scroll.style.width = ((pageTitlesRif[i] - pageTitlesRif[i - 1])  * tot / 
            scrollHeight).toString() + 'px';
          }
        }
      }

      let putClass = function(){
        this.classList.remove('action');
      }

      function whichTransitionEvent(){
          var t;
          var el = document.createElement('fakeelement');
          var transitions = {
            'transition':'transitionend',
            'OTransition':'oTransitionEnd',
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
          }

          for(t in transitions){
              if( el.style[t] !== undefined ){
                  return transitions[t];
              }
          }
      }

有人建议解决这个问题吗？

Answer 1

好吧，我已经有了解决方案，小题大做了... 控制现有标题是否与循环中出现的标题不同就足够了，如下所示：

window.onscroll = function() {
        for (var i = 1; i < pageTitlesRif.length; i++) {
          if (window.pageYOffset > pageTitlesRif[i - 1] && window.pageYOffset < pageTitlesRif[i]) {
           if (titleScroll.innerText != pageTitlesText[i - 1]){
              titleScroll.innerText = pageTitlesText[i - 1];
              titleScroll.classList.add('action');
              let transitionEnd = whichTransitionEvent();
              titleScroll.addEventListener(transitionEnd, putClass, false);
              scroll.style.left = (pageTitlesRif[i-1] * tot / scrollHeight).toString()+ 'px';
              scroll.style.width = ((pageTitlesRif[i] - pageTitlesRif[i - 1])  * tot / 
              scrollHeight).toString() + 'px';
            }
          }
        }
      }

这样，标题（和其他标签元素）上的代码只执行一次。

在原始 JS 的循环中仅触发一次 classLiss.add 事件

fire a classLiss.add event only once in a loop in raw JS

javascript

loops

addeventlistener