public/assets/js/plugins/scrollShadowVert.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

$$plugins.define('scrollShadowVert', function (element, options) {
    var scrollElm = element.querySelector('.scrollbar'),
        listInner = element.querySelector('.scrollbar__inner');

    //observer for adding/removing children elements
    const observer = new MutationObserver(function (mutations) {
        var childrenMutations = mutations.filter((x) => x.type === "childList");
        if (childrenMutations.length > 0) {
            checkScrollPos(scrollElm);
        }
    });

    observer.observe(listInner, { subtree: true, childList: true });

    //observer for initialized class
    if (options.initialize == true) {
        const targetNode = element;

        const observer2 = new MutationObserver(function (mutations) {
            var classMutations = mutations.filter((x) => x.type === "attributes");
            if (classMutations.length > 0 && targetNode.classList.contains('initialized')) {
                checkScrollPos(scrollElm);
                observer2.disconnect();
            }
        });
        observer2.observe(targetNode, { attributes: true, attributeFilter: ['class'] });
    }

    checkScrollPos(scrollElm);

    scrollElm.addEventListener("scroll", function () {
        checkScrollPos(this);
    });

    function checkScrollPos(scrollContainer) {
        if (scrollContainer.scrollTop + element.offsetHeight > listInner.offsetHeight - 8) {
            element.classList.add('scrollbarShadow--bottom');
        } else {
            element.classList.remove('scrollbarShadow--bottom');
        }
        if (scrollContainer.scrollTop < 8) {
            element.classList.add('scrollbarShadow--top');
        } else {
            element.classList.remove('scrollbarShadow--top');
        }
    }

    //checkScrollInit();

    //function checkScrollInit() {
    //    if (element.offsetHeight >= listInner.offsetHeight) {
    //        element.classList.add('scrollbarShadow--noScroll');
    //    } else {
    //        element.classList.remove('scrollbarShadow--noScroll');
    //    }
    //}
});