https://www.sunwind.no/js/setupHorizontalScroll.js

1if (typeof window.categoryListScrollScriptLoaded === 'undefined') {
2    window.categoryListScrollScriptLoaded = false;
3}
4
5if (window.categoryListScrollScriptLoaded) {
6    // console.log('List Scroll script has already been loaded.');
7} else {
8    window.categoryListScrollScriptLoaded = true;
9    // console.log('Loading List Scroll script for the first time.');
10
11    /**
12     * Automatically scrolls the container to center the active element (with [aria-current="page"])
13     * within scrollable containers that have the data-initial-scroll-enabled attribute.
14     */
15    function scrollToActiveElement() {
16    const scrollEnabledWrappers = document.querySelectorAll('[data-scroll-wrapper][data-initial-scroll-enabled]');
17
18    scrollEnabledWrappers.forEach(wrapper => {
19        const container = wrapper.querySelector('[data-scroll-container]');
20        
21        let targetElement = wrapper.querySelector('[aria-current="page"]');
22        if (!targetElement) {
23            targetElement = wrapper.querySelector('[aria-selected="true"]');
24        }
25
26        if (container && targetElement) {
27            const containerRect = container.getBoundingClientRect();
28            const targetRect = targetElement.getBoundingClientRect();
29            
30            const isFirstItem = targetElement === container.firstElementChild;
31            const isLastItem = targetElement === container.lastElementChild;
32            
33
34            if (isFirstItem) {
35                if (container.scrollLeft > 1) {
36                    container.scrollTo({
37                        left: 0,
38                        behavior: 'smooth'
39                    });
40                }
41                return; 
42
43            } else if (isLastItem) {
44                container.scrollTo({
45                    left: container.scrollWidth - container.clientWidth + 2,
46                    behavior: 'smooth'
47                });
48
49            } else {
50                const offset = targetRect.left - containerRect.left - containerRect.width / 2 + targetRect.width / 2;
51                
52                if (Math.abs(offset) > 1) {
53                    container.scrollBy({
54                        left: offset,
55                        behavior: 'smooth'
56                    });
57                }
58            }
59        }
60    });
61}
62  /**
63   * Sets up horizontal scrolling functionality for a given scroll container
64   * and associated navigation buttons.
65   */
66  function setupHorizontalScroll(container, prevButton, nextButton, scrollStep = 200) {
67      if (!container || !prevButton || !nextButton) {
68          console.warn('Missing scroll container or navigation buttons.');
69          return;
70      }
71
72      function updateButtonStates() {
73          const { scrollLeft, scrollWidth, clientWidth } = container;
74
75          const hasOverflow = scrollWidth > clientWidth;
76
77          if (hasOverflow) {
78              prevButton.hidden = false;
79              nextButton.hidden = false;
80
81              const isAtStart = scrollLeft <= 1;
82              const isAtEnd = scrollLeft >= scrollWidth - clientWidth - 2; 
83
84              prevButton.disabled = isAtStart;
85              nextButton.disabled = isAtEnd;
86
87          } else {
88              prevButton.hidden = true; 
89              nextButton.hidden = true;
90          }
91      }
92
93      prevButton.addEventListener('click', (e) => {
94          e.preventDefault();
95          container.scrollBy({
96              left: -scrollStep,
97              behavior: 'smooth'
98          });
99      });
100
101      nextButton.addEventListener('click', (e) => {
102          e.preventDefault();
103          container.scrollBy({
104              left: scrollStep,
105              behavior: 'smooth'
106          });
107      });
108
109      container.addEventListener('scroll', updateButtonStates);
110      window.addEventListener('resize', updateButtonStates);
111      
112      updateButtonStates();
113  }
114
115  /**
116   * Searches for associated elements within a wrapper and initializes scrolling functionality.
117   */
118  function setupScrollForWrapper(wrapper, scrollStep = 200) {
119      const container = wrapper.querySelector('[data-scroll-container]');
120      const prevButton = wrapper.querySelector('[data-scroll-prev-button]');
121      const nextButton = wrapper.querySelector('[data-scroll-next-button]');
122      setupHorizontalScroll(container, prevButton, nextButton, scrollStep);
123  }
124
125
126  document.addEventListener('DOMContentLoaded', function() {
127      const wrappers = document.querySelectorAll('[data-scroll-wrapper]');

128      wrappers.forEach(wrapper => setupScrollForWrapper(wrapper));
129      scrollToActiveElement();
130  });
131}