Есть ли способ добавить overflow-x: hidden в html и body, не затрагивая событие прокрутки Javascript?

Question

Я пытаюсь предотвратить прокрутку оси для всей страницы, я использовал overflow-x: скрытый в html, но iPhone и iPad IOS 12 и новее в safari и chrome игнорировали его. После этого я поместил overflow-x: hidden в html и body, которые распознаются на обоих устройствах, но мое событие прокрутки Javascript перестало выполняться. Я уже пытался обернуть все элементы в контейнеры div и добавить overflow-x: hidden, но все еще не исправлено. Пожалуйста, помогите, я отказался.

, что исправило overflow-x на iPhone и iPad, но событие прокрутки Javascript перестало выполняться.

html{
  scroll-behavior: smooth;
  overflow-x: hidden;
 }

body{
    margin-left: 10px;
    margin-right: 10px;
    height: 100vh;
    background: linear-gradient(to top right, violet, cyan, darkviolet);
    width: 100%;
    overflow-x: hidden;
   }

   .wrapper{

     width: 100%;
     height: auto;
   }

оно отлично работает на всех устройствах, кроме iPhone и iPad IOS12 и новее в Safari и Chrome

CSS

html{
  scroll-behavior: smooth;
  overflow-x: hidden;
 }

body{
    margin-left: 10px;
    margin-right: 10px;
    height: 100vh;
    background: linear-gradient(to top right, violet, cyan, darkviolet);
    width: 100%;
   /* overflow-x: hidden; */ Removed
   }

   .wrapper{

     width: 100%;
     height: auto;
   }

JavaScript

window.addEventListener('scroll', ()=>{

      navScroll();
      aboutFade();
      contactAnime();

        if (window.scrollY > 235) {
            navBar.style.background = '#fff';
            navBar.style.height = '70px';
            navBar.classList.add('nav-bar-shadow-anime');
            navBar.style.transition = '1s';
            for(var i = 0; i < navBarA.length; i++){
                navBarA[i].style.color = "black";
                navBarA[i].style.transition = "1s";
            }
            navBarMobile.style.color = "black";
        }
        else {
            navBar.style.background = 'transparent';
            navBar.style.height = '100px';
            navBar.classList.remove('nav-bar-shadow-anime');
            navBar.style.transition = '1s';
            for(var i = 0; i < navBarA.length; i++){
                navBarA[i].style.color = "white";
                navBarA[i].style.transition = "1s";
            }
            navBarMobile.style.color = "white";
        }

        if(window.scrollY > 800){
            for(var i = 0; i < percentBar.length; i++){
                experienceMeter[i].style.width = percentBar[i].getAttribute('data-target');
                experienceMeter[i].style.transition = "3s";
                experienceMeter[i].style.transitionDelay = "1s";
            }
        }

        if(window.scrollY > 1400){
            /*
            projectOne.style.left = "0";
            projectOne.style.transition = '2s';
            projectOne.classList.add('project-img-anime');

            projectThree.style.left = "0";
            projectThree.style.transition = '2s';
            projectThree.classList.add('project-img-anime');
            */

            projectOne.style.top = "0";
            projectOne.style.opacity = "1";
            projectOne.style.transition = "0.2s";
            projectOne.style.transitionDelay = "1s";

            projectTwo.style.top = "0";
            projectTwo.style.opacity = "1";
            projectTwo.style.transition = "0.2s";
            projectTwo.style.transitionDelay = "1.5s";

            projectThree.style.top = "0";
            projectThree.style.opacity = "1";
            projectThree.style.transition = "0.2s";
            projectThree.style.transitionDelay = "2s";

            projectFour.style.top = "0";
            projectFour.style.opacity = "1";
            projectFour.style.transition = "0.2s";
            projectFour.style.transitionDelay = "2.5s";

            projectFive.style.top = "0";
            projectFive.style.opacity = "1";
            projectFive.style.transition = "0.2s";
            projectFive.style.transitionDelay = "3s";

            projectSix.style.top = "0";
            projectSix.style.opacity = "1";
            projectSix.style.transition = "0.2s";
            projectSix.style.transitionDelay = "3.5s";
        }
        else {
            /*
            projectOne.style.left = "-160%";
            projectOne.style.transition = '2s';
            */
        }

    },false);

, как ожидается, предотвратит прокрутку оси на всех устройствах без ошибки события прокрутки.