lundi 25 mars 2019

How to pass scroll events for different browsers in JavaScript

I have attached a scroll event to the window object on my portfolio site (I know this can be frowned upon). When the top of the window becomes greater than a specified y position [if (window.top > y)] then I want to add classes to my header element to make scale the size of the element down and "stick" to the top of the page. When passing through the event as an argument into my function, the I have to traverse through it differently on different browsers (Chrome = event.path[1].scrollY, Safari = event.target.defaultView.scrollY, and etc.). I have written code to detect the browser, however, I cannot come up with a way to take the correct path of the event depending on the browser.

I have tried saving the paths in an array as a string, and depending on the browser detected it would pass that string in as the argument. But of course this did not work. So here is what I currently have.

// creates an object called browser to test the behaviors of different browsers.

var Browser = (function () {
    "use strict";
    var Browser = function () {
        this.chrome = function () {
            return !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
        };
        this.firefox = function () {
            var iT = window.InstallTrigger;
            return typeof iT !== 'undefined';
        };
        this.explorer = function () {
            return !!document.documentMode;
        };
        this.edge = function () {
            return (!!document.documentMode && !!window.StyleMedia);
        };
        this.safari = function () {
            return (/constructor/i).test(window.HTMLElement) || (function (p) {
                return p.toString() === "[object SafariRemoteNotification]";
            })(!window.safari || (typeof safari !== 'undefined' && safari.pushNotification));
        };
    };
    return Browser;
}());

// Creates the browser object and loops through until true is returned.

function detectBrowser() {
    "use strict";
    var b = new Browser(),
        vendor;
    for (vendor in b) {
        if (b[vendor] !== 'undefined') {
            if (b[vendor]()) {
                return vendor;
            }
        }
    }
}

/*-------------------------*/

/* Checks the y position passed in from the event */

function checkPos(e) {
    if (e > 50) {
        if (logo.classList.length === 0) {
            expandHeader();
            checkScroll();
        }
    } else {
        if (logo.classList.length === 1) {
            minimizeHeader();
        }
    }
}

/* Adds scroll event and passes the event through to the next function to check it's y position */

function addEvent() {
    var browser = detectBrowser();
    window.addEventListener("scroll", function (e) {
            var event = e;
            window.requestAnimationFrame(function () {
            checkPos(/* This is where the event will be passed */)
        });
    });
}

addEvent();



Aucun commentaire:

Enregistrer un commentaire