✔ mCustomScrollbar + scroll eventListener

[goto;]

Hallo zusammen,

ich nutze in einem Projekt einen eventListener, welcher auf allen scrolls lauscht.

window.addEventListener('scroll', function scroll() {
        if(!scrollStarted) {
            coverStyle.pointerEvents = 'auto';
            scrollStarted = true;
        }
        clearTimeout(timer);
        timer = setTimeout(function(){
            coverStyle.pointerEvents = 'none';
            scrollStarted = false;
            if(clicked) {
                dispatchClick(pos);
                clicked = false;
            }
        },500);
    }, false);

Zusätzlich kommt vereinzelt das jQuery-Plugin mCustomScrollbar zum Einsatz. Dieses Plugin immitiert jedoch nur einen Scroll indem es dem gewünschten Element eine absolute Positionierung zuteilt.

Ziel soll es sein, dass das "scroll"-Event, welches von mCustomScrollbar ausgeht, auch im Listener berücksichtigt wird.

Ich habe darüber hinaus die Möglichkeit, im Plugin einen Callback während des Scrollens zu feuern:

$("#ctmt-setting .modal").mCustomScrollbar({
                    advanced:{
                                updateOnContentResize: true
                    },
                    callbacks: {
                        whileScrolling: (e) => {
                            console.log(e);
/* Ausgabe (top, left, right, bottom, percent)*/
                        }
                    }
                });

Fällt Euch etwas ein, wie ich das Problem lösen kann?

Viele Grüße

 

[merzi86]

Wenn du JQuery auf der Seite nutzt wieso definierst du das Event über reines JavaScript und nicht über JQuery?

Das aber nur am Rande.
Du kannst ja im Callbacks in der whileScrolling Methode das Event Triggern.

$("#ctmt-setting .modal").mCustomScrollbar({
                    advanced:{
                                updateOnContentResize: true
                    },
                    callbacks: {
                        whileScrolling: (e) => {
                            $(window).trigger('scroll');
                            console.log(e);
/* Ausgabe (top, left, right, bottom, percent)*/
                        }
                    }
                });

 

[goto;]

Hallo merzi86,

das Event besteht aus reinem JavaScript, da ich es bei github so gefunden habe. Ich teste derzeit, ob es sich für meinen Einsatzbereich eignet. Wenn ja, werde ich es in jQuery "übersetzen".

Danke für Deinen Tipp, funktioniert auffallend.

Hier noch das Resultat:

$(window).on('custom-scroll', (e) => {
        (!scrollStarted)?coverStyle.pointerEvents='auto':scrollStarted=1;
        clearTimeout(timer);
        timer = setTimeout(() => {
            coverStyle.pointerEvents='none';
            scrollStarted=0;
            (clicked)?dispatchClick(pos):clicked=0;
        },500);
    });

und

$("#ctmt-setting .modal").mCustomScrollbar({
                    advanced:{
                        updateOnContentResize: true
                    },
                    callbacks: {
                        whileScrolling: function(){
                           $(window).trigger('custom-scroll');
                        }
                    }
                });

Viele Grüße