https://internshala.com/static/js/review_section.1727159863.js

1document.addEventListener("DOMContentLoaded", () => {
2    initCustomScrollbar(document.querySelector(".review-section-container .right-section .scroll-container"));
3});
4
5const initCustomScrollbar = (scrollContainerDOM) => {
6    if (!scrollContainerDOM) return;
7
8    let currentIndex = 0;
9    const scrollControllerDOM = scrollContainerDOM.querySelector('.scroll-controller');
10
11    const desktopArrowPrev = document.querySelector('.review-section-container .right-section .scroll-container .desktop-arrow.prev');
12    
13    const desktopArrowNext = document.querySelector('.review-section-container .right-section .scroll-container .desktop-arrow.next');
14
15    const scrollDOM = scrollContainerDOM.querySelector('.scroll');
16    const cardDOMArray = scrollDOM.querySelectorAll('.card');
17
18    if (scrollDOM.clientWidth >= (scrollDOM.scrollWidth - 1)) {
19        scrollDOM.classList.add('no-scroll');
20        return;
21    }
22
23    scrollControllerDOM.style.display = 'flex';
24
25    const scrollbarThumbDOM = scrollControllerDOM.querySelector('.track .thumb');
26
27    scrollbarThumbDOM.style.width = `${(scrollDOM.clientWidth * 100) / scrollDOM.scrollWidth}%`;
28
29    scrollDOM.addEventListener('scroll', e => {
30        scrollControllerDOM.querySelector('.track .thumb').style.left = `${(scrollDOM.scrollLeft * 100) / scrollDOM.scrollWidth}%`;
31
32        if (scrollDOM.scrollLeft === 0) {
33            scrollControllerDOM.querySelector('.arrow.prev').classList.add('disabled');
34            desktopArrowPrev.classList.add('disabled');
35        } else if (scrollDOM.scrollLeft + scrollDOM.clientWidth >= (scrollDOM.scrollWidth - 1)) {
36            scrollControllerDOM.querySelector('.arrow.next').classList.add('disabled');
37            desktopArrowNext.classList.add('disabled');
38        } else {
39            desktopArrowNext.classList.remove('disabled');
40            desktopArrowPrev.classList.remove('disabled');
41            scrollControllerDOM.querySelector('.arrow.prev').classList.remove('disabled');
42            scrollControllerDOM.querySelector('.arrow.next').classList.remove('disabled');
43        }
44    });
45
46    scrollControllerDOM.querySelector('.arrow.next').addEventListener('click', e => {
47        if (e.currentTarget.classList.contains('disabled')) return;
48
49        if (cardDOMArray[currentIndex + 1]) {
50            currentIndex++;
51            cardDOMArray[currentIndex].scrollIntoView({ behavior: "smooth", block: 'nearest', inline: 'start'});
52        } else {
53            cardDOMArray[cardDOMArray.length - 1].scrollIntoView({ behavior: "smooth", block: 'nearest', inline: 'start'});
54        }
55    });
56
57    scrollControllerDOM.querySelector('.arrow.prev').addEventListener('click', e => {
58        if (e.currentTarget.classList.contains('disabled')) return;
59
60        if (cardDOMArray[currentIndex - 1]) {
61            currentIndex--;
62            cardDOMArray[currentIndex].scrollIntoView({ behavior: "smooth", block: 'nearest', inline: 'start'});
63        } else {
64            cardDOMArray[0].scrollIntoView({ behavior: "smooth", block: 'nearest', inline: 'start'});
65        }
66    });
67
68    const resetScrollPosition = () => {
69        currentIndex = 0;
70        cardDOMArray[0].scrollIntoView({ block: 'nearest', inline: 'start' });
71    }
72
73    return resetScrollPosition;
74}