Javascript 溢出：隐藏在iOS Safari上，与scrollLeft不配合使用

我有一个问题被其他类似的帖子回答了一半：

或者：

问题在于

溢出：iOS Safari中的隐藏
和移动Chrome没有像我预期的那样工作

overflow:body上隐藏的
适用于Firefox。如果你在Firefox中以这种方式尝试下面的代码，它就是应该如何工作的

所以我已经看到，
overflow:hidden
在iOS Safari和mobile Chrome的主体上不起作用–您必须将所有内容都包装在主体下方的一个div中，并给它一个
overflow:hidden
。但不幸的是，这种方式并没有达到我想要的效果，因为它将忽略JavaScript函数
scrollLeft

下面是对应该发生的事情的快速描述：

你打开网站。主体或包装将显示一半，因为其宽度为180%

jQuery代码将整个内容滚动到
{scrollLeft：（right）}
它应该停留的地方。（至少在x轴上）

单击按钮应将站点向左移动，站点也应停留在该位置。（在x轴/y轴上应该可以滚动）
也许有点复杂；如果您想自己尝试，请随意复制代码

我认为问题可能是
overflow:hidden
被覆盖或覆盖JavaScript函数

有人知道如何解决这个问题吗？
也许还有另一种方法可以告诉浏览器不要在x轴上滚动

这是我的密码：



滚动试验
@字符集“UTF-8”；
：根{
--蓝色：#127296；
}
html{
身高：100%；
字号：20px
}
身体{
边际：0px；
溢出x：隐藏；
}
.包装纸{
/*溢出x：隐藏*/
}
特克斯菲尔德先生{
颜色：var（--蓝色）；
填充：30px 35px 150vh 35px；
}
怀特先生{
颜色：白色；
}
钮扣{
边界：无；
背景：无；
字号：1em；
填充物：2px 5px 15px 5px；
自对准：居中；
}
艾因斯先生{
格构柱：1/6跨；
}
zwei先生{
网格柱：7/-1；
背景色：var（--蓝色）；
}
#内容{
宽度：180%；
网格模板列：重复（12，1fr）；
边际：0px；
高度：自动；
显示：网格；
网格模板列：重复（12，1fr）；
}
点击
点击
$（文档）.ready（函数（）{
var left=$（文档）.outerWidth（）-$（窗口）.width（）；
var right=$（窗口）.width（）-$（文档）.outerWidth（）；
$（'body，html'）.scrollLeft（左）；
$（“.button”）。单击（函数（）{
$（'body，html'）。设置动画({
左：（右）
}, 200);
控制台日志（“单击”）；
});
$（“.button_2”）。单击（函数（）{
$（'body，html'）。设置动画({
滚动左：（左）
}, 200);
});
});