+ Rispondi al messaggio
Visualizzazione dei risultati da 1 a 5 su 5

intercettare un evento in un for-next una sola volta (javascript)

  1. #1
    BennyB non è in linea Scolaretto
    Buongiorno.
    Ho realizzato uno studio che riguarda una barra laterale che segnala il campo compreso tra 2 titoli in una pagina, riportando il titolo sopra la barra stessa. Funziona tutto bene finché non cerco di animare il testo del titolo all'atto del cambio di 'sezione' (cioè un parte tra 2 titoli), perché l'animazione si attua continuamente. Questo il codice HTML (solo la parte significativa):
    codice HTML:
    <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>
    Il tag che crea problemi è contrassegnato con la classe scroll-title.
    questa la parte CSS interessata:
    codice HTML:
    .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;
    }
    Infine, questo è il codice (semplificato) JS:
    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;
          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);
    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');
                titleScroll.addEventListener('transitionend', removeClass);
                titleScroll.innerText = pageTitlesText[i - 1];
              }
            }
    }
    
    let removeClass = function(){
            titleScrollSide.classList.remove('action');
    }
    
    In pratica, carico i riferimenti della posizione Y dei titoli nell'array pageTitlesRif, e poi durante lo scroll della pagina individuo se il punto di scroll è all'interno di una 'sezione', e allora adatto la barra (non riporta nel codice soprastante) e modifico il titolo. Funziona bene, finchè non cerco di applicare la classe action, e poi con un addEventListener('transitionend' la rimuovo al termine dell'evento per riportare il font a 10px. Purtroppo, l'operazione accade in continuazione, e non so come limitarla ad un solo evento. Qualcuno sa suggerirmi qualcosa?
    Spero sia abbastanza chiaro.

  2. #2
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Senza riprodurre esattamente l'esempio originale, diventa difficile dare indicazioni precise e occorre un discreto quantitativo di tempo. Non potresti eventualmente caricare l'esempio, tipo su CodePen?
    ℹ️ Leggi di più su _alka_ ...

  3. #3
    BennyB non è in linea Scolaretto
    Sì, giusto.
    Ecco qui:codePen link.
    Come vedi, funziona tutto bene tranne l'animazione. Ho pensato di utilizzare dei boolean per limitare gli eventi, ma al momento non ho capito come introdurli.

    Vedi tu se riesci a trovare una soluzione. Questo è uno studio, ma certo le indicazioni mi saranno preziose per il futuro, perché credo che queste situazioni si ripresenteranno spesso.

  4. #4
    L'avatar di sspintux
    sspintux non è in linea Very Important Person Ultimo blog: SqlServer express e connessione DAC
    Ciao,

    la butto qui senza aver letto più di tanto e quindi nessuna pretesa.

    Questo (e quanto segue nel ciclo for):

    titleScrollSide.innerText = pageTitlesText[i - 1];

    lo fai solo se sono diversi

    HTH
    ℹ️ Leggi di più su sspintux ...

  5. #5
    BennyB non è in linea Scolaretto
    Caspita, lo sapevo che doveva essere una scemenza... perfetto, e ovvio.
    Mi sono infilato in mille casini, e la soluzione era lì sotto gli occhi...

    Grazie mille!

    P.S.: per la cronaca, se a qualcuno interessasse, ho aggiornato e corretto il codePen di cui sopra.
    Ultima modifica di BennyB; 24-09-2021 00:02 

+ Rispondi al messaggio

Potrebbero interessarti anche ...

  1. Visualizzare una sola volta il foglio1
    Da magili53 nel forum Visual Basic 6
    Risposte: 1
    Ultimo Post: 03-04-2017, 22:37
  2. Aprire una sola sessione per volta
    Da indigo5 nel forum Visual Basic .Net
    Risposte: 4
    Ultimo Post: 08-06-2016, 10:56
  3. L'evento Click viene eseguito una sola volta
    Da Cereal Killer nel forum Visual Basic 6
    Risposte: 5
    Ultimo Post: 19-11-2012, 09:04
  4. [Javascript]Refresh 1 sola volta di un'altra pagina gia' aperta
    Da il_betto nel forum HTML, CSS e JavaScript
    Risposte: 9
    Ultimo Post: 10-09-2007, 10:37
  5. [Javascript]Intercettare evento chiusura
    Da xmaxfane nel forum HTML, CSS e JavaScript
    Risposte: 1
    Ultimo Post: 19-04-2006, 12:55