https://www.vigicrues.gouv.fr/assets/js/scroll-to-show.js

1/*
2 * Niveau 2 : scroller dans la liste des tronçons / stations quand on ouvre un tronçon et qu'il s'affiche tout en bas, tronqué à cause de cela
3 *            après scroll, le tronçon et ses stations sont visibles.
4 *
5 * @dependency jquery
6 * @date 2017-04-12
7 * @author R. Rimelé, Ph. Vayssière (Alsacréations)
8 *
9*/
10
11/*jslint node: true */ /*jslint browser: true*/ /*global  $*/
12"use strict";
13
14/* On a besoin de 2 éléments références pour le calcul de la position verticale : le wrapper et sa barre de scroll d'une part, la liste des items d'autre part */
15var $ref1      = $(".basin-wrapper"),
16    $ref2     = $(".basin-list"),
17    selItems  = ".basin-item";
18
19// Si l'élément existe...
20if ( $ref1.length ) {
21  // Les positions retournées ont pour référence le 1er parent "positionné" (dont la valeur de position vaut autre chose que "static"). On positionne donc la 1ère référence
22  $ref1.css("position","relative");
23
24  $ref1.on("click", selItems, function (e) {
25     var topRef1,
26       bottomRef1,
27       topRef2,
28       bottomRef2,
29       heightItem,
30       heightRef,
31       scroll = false,
32       $_this = $(this);
33
34    // On attend que BS ait fermé le sous-menu (dropdown) qui pourrait être précédemment ouvert
35    setTimeout(function () {
36      heightRef = $ref1.outerHeight();
37
38      // Avec pour référence Y1=0 le wrapper, établie ci-dessus (élément ayant une scrollbar quand son descendant liste - la référence 2 - est trop haut)
39      topRef1 = $_this.position().top;
40
41      // Avec pour référence Y2=0 la liste trop haute pour son conteneur
42      $ref2.css("position", "relative");
43      topRef2 = $_this.position().top;
44      heightItem = $_this.outerHeight();
45      $ref2.css("position", "static"); // on revient à l'état initial où c'est le wrapper la référence (n°1)
46
47      bottomRef1 = topRef1 + heightItem;
48      bottomRef2 = topRef2 + heightItem;
49
50      // console.log("la liste est scrollée", Math.round($ref2.position().top));
51      // console.log("(wrapper) topRef1", Math.round(topRef1), "bottomRef1", Math.round(bottomRef1));
52      // console.log("(list) topRef2", Math.round(topRef2), "bottomRef2", Math.round(bottomRef2));
53      // console.log("heightRef", Math.round(heightRef), "hauteur item", Math.round(heightItem));
54      // console.log('On scrollerait de ', Math.round(bottomRef2 - heightRef));
55      // console.log('---------------');
56
57      // Si le bas de l'item (ouvert) est positionné plus bas que la hauteur heightRef du wrapper, il est nécessaire de scroller
58      if (bottomRef1 > heightRef) {
59        // console.log("CAS 1 : Il faut scroller, au MIN des 2 valeurs qui suivent :");
60        // console.log("bottomRef2 - heightRef + 10", bottomRef2 - heightRef + 10);
61        // console.log("heightRef", heightRef);
62        scroll = Math.min(bottomRef2 - heightRef + 10, heightRef);
63      }
64      // Si l'item ouvert est plus haut que sa "fenêtre" (et ça l'emporte sur / écrase le cas précédent)
65      if (heightItem > heightRef) {
66        // console.log('CAS 2 : L\'item ouvert est plus haut que sa "fenêtre", scroll demandé de ', topRef2);
67        scroll = topRef2;
68      }
69      if (scroll) {
70        // console.log("Je scrolle de ", scroll);
71        // console.log("==============");
72        $ref1.scrollTop(scroll);
73      }
74    }, 14); // 14ms est légèrement moins qu'1 frame à 60Hz (1000ms / 60 ~ 16.67ms) et est suffisant
75
76    // console.log("Hors de timeout",/*"posY1", posY1,*/ "topRef2", topRef2, "bottomRef2", bottomRef2, "hauteur item", heightItem);
77    // @TODO Ne scroller que si le bas de l'item (ouvert) est positionné plus bas que la hauteur heightRef du wrapper (530)
78    // if (bottomRef2 > heightRef) {
79      // setTimeout(function () {
80        // $ref1.scrollTop(topRef2);
81        // console.log("on a scrollé");
82      // }, 400);
83    // }
84  });
85}