Как сделать горизонтальную прокрутку кросс-браузеров и трекпадов дружественными?

Question

Я работаю над новым сайтом и пытаюсь создать горизонтальную карусель, которая работает с колесом мыши.Следующий код прекрасно работает в Chrome, но в Safari он работает очень странно с трекпадом.

Я попытался установить дельту как e.deltaY вместо e.wheelDelta, чтобы уменьшить окончательное значение для прокрутки имногие другие вещи, но ничего не работало как в браузерах, так и на трекпаде + мыши.

const containerCategories = document.querySelector('.container-home');

function scrollHorizontally(e) {
        e = window.event || e;
        e.preventDefault();
        containerCategories.scrollLeft -= (e.wheelDelta || -e.detail) * 10;
    }
    if (containerCategories.addEventListener) {
        containerCategories.addEventListener("mousewheel", scrollHorizontally, false);
        containerCategories.addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        containerCategories.attachEvent("onmousewheel", scrollHorizontally);
}

Я ожидал получить плавный эффект "перевернутой" прокрутки, но здесь ничего не работает.Ваша помощь была бы действительно потрясающей.