【发布时间】：2015-09-25 13:50:57
【问题描述】：
我正在构建一个网站，如果内容大于屏幕，我需要某个 div 在溢出时水平滚动。好的，这很容易 - 它适用于所有浏览器，但它不能在 Safari 上完美运行：
场景：在 iPad 或 iPhone 上以肖像方式加载页面。可滚动 div 中的内容大于屏幕。卷轴工作正常。现在我将屏幕旋转为横向，内容现在比屏幕小，因此没有滚动条。我旋转回 potrait，出现滚动条，但滚动不起作用。如果我然后刷新页面，滚动将再次起作用。
问题重复：
这个场景可以用这个小提琴复制：http://jsfiddle.net/v7wvbupd/2/。如果您使用 Android 产品进行此操作，则每次旋转都可以完美运行。如果你对 Apple 产品做同样的事情，你会遇到这个错误。
滚动 - 带旋转 - 在 Safari 以外的所有其他移动浏览器上都能正常工作。
我一直在尝试其他帖子和其他网站的一些东西，但没有成功。
我尝试过但没有奏效的方法：
- 设置身体的相对位置。
- 添加以下内容：
html, body {overflow-x: hidden;}。 - 在可滚动的 div 上使用：
-webkit-overflow-scrolling:touch;。 - 将
!important添加到-webkit-overflow-scrolling:touch;和overflow-x: auto以防止它在旋转时被覆盖。
我也一直在研究一些 js 修复，例如在属性上添加超时但仍然没有结果：
<script>
$("[scrollable]").css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling", "touch") }, 100);
</script>
我遇到的大多数帖子都是滚动根本不起作用的问题。在我的情况下，它一直有效，直到我从横向旋转到纵向。
我的结构（简化）：
<html>
<body>
<div id="header" class="col-md-12"></div>
<div class="scrollableDiv">
<div id="footer" class="col-md-12"></div>
</body>
</html>
我目前的 CSS：
html {
overflow-y: scroll;
height: 100%;
width:100%;
}
body {
padding-top: 10px;
padding-bottom: 20px;
height: 100%;
width: 100%;
}
.scrollableDiv {
overflow-x: auto !important;
width: 800px;
overflow-y: hidden;
padding-bottom: 55px;
-webkit-overflow-scrolling: touch !important;
}
.col-md-12{
width: 100%;
}
编辑
我的网站使用 Angularjs 作为解决方案的一部分。我只是测试了将它包装在一些 js 中是否是问题，但这也与它无关。这似乎只是 Safari 的常见问题？
【问题讨论】：
标签： html css ipad safari touch