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

Question

我在我的网站上添加了一个侧边栏标签“订阅”(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;但似乎什么也没做，我不确定这会做什么。

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

Answer 1

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

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