带负边距的全宽菜单在 safari 和 ios 上提供无限水平滚动

Question

我有一个网站，其中有一个全宽菜单，它的边距为负。它工作完美，除了 Safari/iOS.

在 Safari/iOS 我可以永远水平滚动....为什么？

 background-color: #0a6e96;
 margin: -1px -9999rem;
 padding: 1.2rem 9999rem;
 margin-top: 48px;

更新 - 解决方案

这个link有多个解。

Answer 1

为避免触发水平滚动，您需要在 html 和 body 元素上设置 overflow-x:hidden。

Full width menu with negative margin gives infinite horizontal scroll on safari and ios