负位置：绝对导致 iPad 上的水平滚动

Posted 2023-03-12

【中文标题】负位置：绝对导致 iPad 上的水平滚动

【英文标题】：Negative position:absolute causes horizontal scroll on iPad

【发布时间】：2013-09-02 12:45:21

【问题描述】：

我在我的网站上添加了一个侧边栏标签“订阅”(jquery.tabSlideOut.v1.3.js)（访问http://thecasket.co.uk/）。桌面浏览器很好，但会导致 iPad 上出现水平滚动条 - 页面开始滑动。该选项卡在 javascript 中设置了一个负绝对位置（-290px，宽度 + 在我的 CSS 中用于滑出 div 的填充）。在 iPad 上，滚动条采用幻灯片 div 的宽度。

<div class="slide-out-div">
my subscribe form
</div>

.slide-out-div 
padding: 20px;
width: 250px;
background: rgb(255,255,255);
z-index: 9999;
    -webkit-overflow-scrolling

我尝试添加：-webkit-overflow-scrolling: touch;但似乎什么也没做，我不确定这会做什么。

任何关于修复卷轴的帮助，非常感谢。

【参考方案1】：

由于您没有为任何父容器定义overflow:hidden，因此移动设备会将视口扩展到内容的大小。您可以采用这种方法并设置overflow 值，或者您可以在slide-out-div 上使用position: fixed 而不是absolute。两者都应该解决问题。

还要注意<a>元素的文本text-indent: -99999px;是“content”，但我猜应该是“subscribe”。

【讨论】：

确实-我确实尝试过-通过将 overflow:hidden 添加到 body 元素（最外面的元素设置为 100% 宽度-以便标签贴在浏览器的右侧），但没有运气有了这个。不知道为什么。 （PS - 谢谢你的第二条笔记 - 忘了这样做）

如果有效，现在让我看看。我可以在晚上测试它，那时我有一根电缆可以将手机连接到我的电脑。

是的 - 这行得通，可能是最好的妥协，因为我真的没能溢出：隐藏工作。我环顾四周，发现定位会在 ipad 上引起有趣的 scoll 问题 - 也许最好避免使用此解决方案对其进行黑客攻击。

酷。我很高兴能帮上忙。