Question

我正在构建一个网站，如果内容大于屏幕，我需要某个div在水平可滚动时溢出。好的，所以这很简单 - 它适用于所有浏览器，但它在Safari上无法正常工作：

场景：在iPad或iPhone上加载potrait页面。可滚动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>

我遇到的大多数帖子都是滚动根本不起作用的问题。在我的情况下，它一直有效，直到我从风景转到potrait。

我的结构（简化）：

<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的常见问题？

Answer 1

我过去曾经遇到过Safari的麻烦。像溢出这样简单的东西可能变得很复杂。

我建议你使用iScroll。为这种情况定义正确的解决方案。 http://cubiq.org/iscroll-5

overflow-x在轮换后无法在Safari上运行

1 个答案: