https://www.tokyodome-hotels.co.jp/assets/common/scripts/modules/handle-scroll-behavior.js

1/**
2 * スクロール時のスタイル制御
3 */
4const targets = document.querySelectorAll('.js-handle-style');
5if (targets) {
6    // X軸方向
7    targets.forEach((el) => {
8        const scrollElement = el.querySelector('.fn-scroll-content');
9        if (!scrollElement)
10            return;
11        scrollElement.onscroll = () => {
12            el.classList.add('is-scroll');
13            const elementWidth = scrollElement.scrollWidth; // 要素の全体幅
14            const elementVisibleWidth = scrollElement.clientWidth; // 要素の表示領域
15            const elementScrollLeft = elementWidth - elementVisibleWidth; // 要素のスクロール可能な最大量
16            const elementScrollPosition = scrollElement.scrollLeft; // 現在のスクロール位置
17            // スクロールの終点まで
18            if (Math.abs(elementScrollLeft - elementScrollPosition) <= 1) {
19                el.classList.add('is-scroll-end');
20            }
21            else {
22                el.classList.remove('is-scroll-end');
23            }
24            // スクロールの開始点まで戻る
25            if (elementScrollPosition === 0) {
26                el.classList.remove('is-scroll');
27            }
28        };
29    });
30    // Y軸方向
31    targets.forEach((el) => {
32        const scrollYElement = el.querySelector('.fn-scrollY-content');
33        if (!scrollYElement)
34            return;
35        const elementHeight = scrollYElement.scrollHeight; // 要素全体の高さ
36        const elementVisibleHeight = scrollYElement.clientHeight; // 要素の表示領域
37        if (elementVisibleHeight < elementHeight) {
38            el.classList.add('is-scroll-init');
39        }
40        scrollYElement.onscroll = () => {
41            el.classList.add('is-scroll');
42            const elementScrollTop = elementHeight - elementVisibleHeight; // 要素のスクロール可能な最大量
43            const elementScrollPosition = scrollYElement.scrollTop; // 現在のスクロール位置
44            // スクロールの終点まで
45            if (Math.abs(elementScrollTop - elementScrollPosition) <= 1) {
46                el.classList.add('is-scroll-end');
47                el.classList.remove('is-scroll');
48            }
49            else {
50                el.classList.remove('is-scroll-end');
51            }
52            // スクロールの開始点まで戻る
53            if (elementScrollPosition === 0) {
54                el.classList.remove('is-scroll');
55            }
56        };
57    });
58}
59export {};