有没有一种方法可以在不影响Javascript滚动事件的情况下将overflow-x:hidden添加到html和正文中？

我试图阻止axis在整个页面上滚动，我在html上使用了overflow-x:hidden，但在safari和chrome上，iPhone和iPad IOS 12及更新版本忽略了它。之后，我将overflow-x:hidden放在两台设备上都能识别的html和body上，但我的Javascript滚动事件停止执行。我已经尝试将所有元素包装在div容器中，并添加overflow-x:hidden，但仍然没有修复。请帮助我，我放弃了

修复了iPhone和iPad上的overflow-x，但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、IOS 12以及Safari和Chrome上的更新版本之外，它在所有设备上都能正常工作

CSS

html{
滚动行为：平滑；
溢出x：隐藏；
}
身体{
左边距：10px；
右边距：10px；
高度：100vh；
背景：线性梯度（右上角，紫色，青色，暗色）；
宽度：100%；
/*溢出-x:隐藏；*/已删除
}
.包装纸{
宽度：100%；
高度：自动；
}
JavaScript
window.addEventListener（'scroll'，（）=>{
导航滚动（）；
aboutFade（）；
接触动画（）；
如果（window.scrollY>235）{
navBar.style.background='#fff'；
navBar.style.height='70px'；
navBar.classList.add（'nav-bar-shadow-anime'）；
navBar.style.transition='1s'；
对于（变量i=0；i800）{
对于（变量i=0；i1400）{
/*
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.transitionLay=“1s”；
projectTwo.style.top=“0”；
projectTwo.style.opacity=“1”；
projectTwo.style.transition=“0.2s”；
projectTwo.style.transitionlay=“1.5s”；
projectThree.style.top=“0”；
projectThree.style.opacity=“1”；
projectThree.style.transition=“0.2s”；
projectThree.style.transitionLay=“2s”；
projectFour.style.top=“0”；
projectFour.style.opacity=“1”；
projectFour.style.transition=“0.2s”；
projectFour.style.transitionlay=“2.5s”；
projectFive.style.top=“0”；
projectFive.style.opacity=“1”；
project5.style.transition=“0.2s”；
project5.style.transitionlay=“3s”；
projectSix.style.top=“0”；
projectSix.style.opacity=“1”；
projectSix.style.transition=“0.2s”；
projectSix.style.transitionLay=“3.5s”；
}
否则{
/*
projectOne.style.left=“-160%”；
projectOne.style.transition='2s'；
*/
}
}，假）；

---

预计可防止所有设备上的轴滚动而不会出现滚动事件错误。

最好使用库并阅读有关如何使用它的说明。事实上，我通过删除CSS身高来修复它：100vh；不使用图书馆，但我会记住这些信息，如果我想在未来使用它。谢谢你的信息。

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);