Сегодня я обнаружил очень странное поведение в браузере Microsoft Edge, где значения deltaX для wheel события, по-видимому, инвертируется! Это было особенно удивительно, потому что это не согласуется с каждым другим браузером, который я когда-либо тестировал, включая Internet Explorer 11, который возвращает ожидаемые значения.

Увидеть эту проблему в действии достаточно просто, просто запустите следующий код и используйте колесо мыши или трекпад.

window.addEventListener('wheel', function(e) {
    console.log(e.deltaX, e.deltaY);
});

Для вашего удобства я создал полностраничный пример (фрагменты для этого сложны):

Полный рабочий пример

Колебание дает положительное значение, а поворот колес дает отрицательное значение, как ожидалось в Edge, IE и других браузерах. Тем не менее, в Edge колесо влево дает положительное значение и справа отрицательное значение, точную противоположность любого другого браузера (IE11 и ниже включены).

Я сделал несколько GIF-видео, чтобы показать эту проблему, связанный с размерами файлов.

IE11
Edge

Вопрос:

Почему так, и есть ли решение для решения проблем совместимости с браузером? Есть ли способ обнаружить это? Является ли это поведение ошибкой или где-то документировано?

Спектр настоятельно предполагает, что это неправильное поведение на самом деле:

Если пользовательский агент прокручивается как действие события колеса по умолчанию, то знак дельта ДОЛЖЕН быть задан правой системой координат, где положительные оси X, Y и Z направлены к самому правому краю, самый нижний край и самая глубина (вдали от пользователя) документа соответственно.

Примечания:

Я тестировал это как в Windows 10 VM, так и на родном ноутбуке, поведение было одинаковым для обоих.
Я уверен, что это не связано с "естественной" /инверсной прокруткой (отключено на всех компьютерах и хостах VM, протестированных только на одной оси).
На стороне примечания, я не знаю, если deltaZ инвертирован или даже поддерживается для начала, у меня нет такого устройства ввода.

Отчет об ошибке:

Я сообщил об ошибке для Microsoft здесь. Он был назначен кому-то, поэтому, надеюсь, он будет исправлен.

Ответ 1

Пока мы ожидаем официального ответа от Microsoft, мы надеемся, что в виде обновления, разрешающего проблему, я нашел способ проверить, сообщает ли браузер неверно инвертированный deltaX.

Edge также добавил поддержку нестандартных wheelDeltaX, wheelDeltaY и wheelDelta свойств, также найденных в Chrome. В отличие от deltaX, эти значения верны, но вместо этого относятся к фактическому изменению колеса, а не к вычисленному результату. Хотя их фактические значения мало интересны, мы можем вывести правильное знаковое значение из них.

В Chrome deltaX и wheelDeltaX правильно имеют разные значения знака, поэтому, когда он отрицательный, другой положителен. Это означает, что если оба значения отрицательные или оба положительные, deltaX неправильно подписан, так как он в настоящее время находится в Edge. Поэтому мы можем использовать это свойство, чтобы обнаружить неверно инвертированное значение и не инвертировать его.

Ниже приведена функция-оболочка, созданная для решения проблемы.

function wheelDeltaX(e) {
    // Get the reported deltaX.
    var r = e.deltaX;

    // In Edge, the deltaX incorrectly matches wheelDeltaX sign.
    // If both value signs match then uninvert it.
    var wheelDeltaX;
    if (
        r &&
        (wheelDeltaX = e.wheelDeltaX) &&
        (
            (r < 0 && wheelDeltaX < 0) ||
            (r > 0 && wheelDeltaX > 0)
        )
    ) {
        r = -r;
    }

    return r;
}

Пока Edge сохраняет правильную подпись для wheelDeltaX, если они, надеюсь, исправит проблему, это должно быть надежным в будущем.