Bonjour, j'aimerais réaliser un scroll automatique avec jquery mais je n'arrive pas à savoir ce que je dois corriger dans mon code pour y parvenir.

Voici mon code html :

foreach ($sequences as $key => $values){
?>
  <div class="lm-seq-btn">
     <?php //if(preg_match('/Séquence.+/', $key)):
         if($key != 'Séquence 0' && $key != 'Séquence 999' &&  $key != 'Séquence 998'){
     ?>
      <button id="btn-<?= $i ?>" class="seq-btn-event"><?= $key ?></button>
      <div class="scrollBoxHor" id="scrollBoxHor-btn-<?= $i ?>">
           <div class="arrowL">
               <span class="glicon glyphicon-menu-left"></span>
           </div>
           <div class="scroller">
                <div id="mask-btn-<?= $i ?>" class="horizontal-scroll-wrapper-mask af"></div>
                    <ul id="content-btn-<?= $i ?>" class="horizontal-scroll-wrapper squares">
                     <?php
                     foreach($values as $value => $elem){
                         if($page==$elem['page']){
                            $valSeqTH = $i;
                      ?>
                         <li class="surbrillance">
                             <a href="./index.php?P=<?= $elem['page'] ?>">
                                 <?= $value ?>
                             </a>
                         </li>
                         <?php
                            } else {
                          ?>
                          <li>
                              <a href="./index.php?P=<?= $elem['page'] ?>">
                                 <?= $value ?>
                              </a>
                           </li>
                                 <?php
                    }
              }
            ?>

Ici, je cherche à afficher mes noms de pages de mon site pour chaque chapitre, ce qui se passe bien. Aussi, quand je suis sur une page, le nom de la page correspondante se met bien en surbrillance et la séquence déroule bien les noms des pages liés à celle-ci (my god j'espère que je suis claire).

Maintenant, je souhaiterais que le nom de la page sur laquelle je suis, en plus d'être en surbrillance s'affiche au milieu, comme ceci :

Donc, j'aimerai que le scroll soit automatique et voici le script qui concerne le scroll :

var y = ($('#content-btn-1').width()) / 2; //représente les séquences
var z = ($('.surbrillance').width()) / 2;  //représente le nom des pages liés aux séquences
                      

$('.squares').animate({ //réprésente le bloc de noms des pages
      scrollLeft: $(".surbrillance").position().left - (y - z + 10)
      }, 250);

Sachant que y et x m'affichent les bonnes valeurs je crois (y m'affiche 180.18 et z : -18).
Pouvez-vous m'aidez?
Je vous remercie

Marie

-------------------------

J'ai trouvé la solution avec ca :

var y = ($('#content-btn-1').width()) / 2;
var z = ($('.surbrillance').width()) / 2;
var x = ($("#surb").position().left);

$(".squares").scrollLeft(x - (y - z - 100));

-
Edité par Marie Bosq 21 novembre 2017 à 15:39:47

Je sais que c'est difficile de formuler une question, j'ai du mal à comprendre. ce qui est signalé comme ne surbrillance c'est la ligne entre séquence1 et séquence2? x et y c'est quoi? et z? que veux tu voir défiler?essais de faire un gif animé ou un JSbin, ou alors mets en live ton code tu auras plus de chance d'être aidée

-
Edité par refschool 21 novembre 2017 à 15:44:50