Как передать события прокрутки для разных браузеров в JavaScript - PullRequest
Новая
       14

Как передать события прокрутки для разных браузеров в JavaScript

0 голосов
/ 25 марта 2019

Я прикрепил событие прокрутки к объекту окна на моем сайте портфолио (я знаю, что это может быть вызвано недовольством). Когда верхняя часть окна становится больше, чем указанная позиция y [if (window.top> y)], тогда я хочу добавить классы к моему элементу заголовка, чтобы уменьшить размер элемента и «прилипнуть» к вершине страница. При передаче события в качестве аргумента в мою функцию, я должен проходить через него по-разному в разных браузерах (Chrome = event.path[1].scrollY, Safari = event.target.defaultView.scrollY и т. Д.). Я написал код для обнаружения браузера, однако не могу найти способ выбрать правильный путь события в зависимости от браузера.

Я попытался сохранить пути в массиве в виде строки, и в зависимости от обнаруженного браузера он передал бы эту строку в качестве аргумента. Но, конечно, это не сработало. Итак, вот что у меня сейчас есть. 

// 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();
...