https://www.stadtwerk-am-see.de/de/static/js/HRSysLib/Hilfsfunktionen/HRScrollTo.js?nc=1790923960777

1/***************************************************************************
2// Firma:          Hehner Reus Systems GmbH
3// Projekt:        com.cerno.basis
4// Datei:          HRVirtualKeyboard.js
5// Erstellung:     29.09.2020
6// Verwendung:     Scrollt smooth zum angegebenen Element. Sucht dazu automatisch 
7                   das nächste DIV mit Scrollbar und kurbelt daran.
8// Abhängigkeiten: CSS.js, Browser.js, Position.js, animator.js
9/****************************************************************************/
10
11/**
12 * Enumeration für die möglichen Scrollmodi.
13 */
14var HRScrollMode = {
15   /*
16    * Zum Top-Wert des Elements
17    */
18   Top: 'top',
19   
20   /*
21    * Zum Bottom-Wert des Elements
22    */
23   Bottom: 'bottom'
24}
25
26/**
27 * Scrollt "smooth" zu dem angegebenen DOM-Element.
28 * 
29 * Später:
30 * Wenn die Browserunterstützung für den scrollToOptions-Parameter für den IE und den Safari irgendwann 
31 * einmal nachgespachtelt werden sollte, können wir die untenstehende Animator-Weiche vollständig loswerden.
32 * 
33 * @param element Das Element, bis zu dem gescrollt werden soll oder dessen ID.
34 * @param config [optional] Kapselt optionale Konfigurationsparameter
35 * <ul>
36 *    <li>scrollMode: Der Scroll-Modus definiert die möglichen Scrollarten (@see HRScrollMode). Default: HRScrollMode.Top</li>
37 * </ul>
38 */
39function HRScrollTo(element, config)
40{
41   try
42   {
43      var scrollMode = HRScrollMode.Top;
44      if (config)
45      {
46         if (config.scrollMode)
47            scrollMode = config.scrollMode;
48      }
49      
50      if (element)
51      {
52         if (typeof(element) === 'string')
53            element = document.getElementById(element);
54         
55         var scrollMargin = getStyleMeasureValue(getStyleValue(element, 'scroll-margin-top'));
56         if (scrollMargin <= 0)
57         {
58            scrollMargin = getStyleMeasureValue(getStyleValue(element, 'scroll-snap-margin-top'));
59         }
60         
61         if (typeof(HRBrowser) === 'object' && !HRBrowser.isIE())
62         {
63            var topPos = getElementTopValue(element);
64            
65            if (topPos >= 0)
66            {
67               topPos = topPos - scrollMargin;
68               if (scrollMode === HRScrollMode.Bottom)
69                  topPos = topPos + getElementHeightValue(element);
70               
71               window.scrollTo({ top: parseInt(topPos), behavior: 'smooth' });
72            }
73         }
74         else
75         {
76            var parent = element.parentNode;
77            
78            while (parent && parent.style && parent.style.overflow != 'scroll')
79               parent = parent.parentNode;
80            
81            if (!parent || parent == document)
82               parent = window;
83            
84            var current = parseInt(parent.scrollTop);
85            if (parent == window)
86            {
87               if (typeof(window.pageYOffset) === 'number')
88               {
89                  current = window.pageYOffset;
90               }
91               else if (document.body && document.body.scrollTop)
92               {
93                  current = document.body.scrollTop;
94               }
95            }
96            
97            /*
98             * Problem: Animator bearbeitet nur Style-Werte, scrollTop ist aber kein Style-Wert.
99             * Daher: Zweites Objekt erzeugen, dessen Style-Wert mit Animator bearbeiten 
100             * und nach jedem Schritt manuell in Scrollbox rüberkopieren.
101             */
102            var helper = document.createElement('DIV');
103            helper.style.height = '0px';
104            helper.style.width = current;
105            helper.style.borderWidth = '0px';
106            helper.style.position = 'absolute';
107            document.body.appendChild(helper);
108            
109            var animator = new Animator({
110               onStep: function()
111               {
112                  var temp = helper.style.width;
113                  if (temp.substr(temp.length - 2, temp.length) === 'px')
114                     temp = temp.substr(0,temp.length-2);
115                  
116                  if (parent != window)
117                  {
118                     parent.scrollTop = temp;
119                  }
120                  else
121                  {
122                     window.scrollTo(0, temp);
123                  }
124               },
125               onComplete: function()
126               {
127                  document.body.removeChild(helper);
128               }
129            });
130            
131            var topPos = getPosition(element).y - scrollMargin;
132            if (parent != window)
133               topPos = topPos - getPosition(parent).y;
134            if (scrollMode === HRScrollMode.Bottom)
135               topPos = topPos + getElementHeightValue(element);
136            
137            animator.addSubject(new NumericalStyleSubject(helper, 'width', current, parseInt(topPos)));
138            animator.play();
139         }
140      }
141   }
142   catch (e)
143   {
144      if (typeof(HRLogError) === 'function')
145         HRLogError(new Error('HRScrollTo.HRScrollTo: Fehler beim Scrollen.' + e));
146   }
147}