Kar*_*lth 88
iOS 5添加了以下样式,可以添加到父div,以便滚动工作.
-webkit-overflow-scrolling:touch
- 我发现我必须在父div上添加这个样式.如果我使用`jQuery("#div").css(" - webkit-overflow-scrolling","touch")`设置它,那么它实际上不起作用.此外,您现在必须将它与`overflow:auto`结合使用,这意味着您*可能*在某些非触摸浏览器上获得双滚动条... (13认同)
- 以下jQuery糖对我有用:https://gist.github.com/2388015(这是非常基本的,不实现边框复制) (8认同)
Dip*_*nan 24
-webkit-overflow-scrolling:touch 正如答案中提到的那样可能是解决方案.
<div style="overflow:scroll !important; -webkit-overflow-scrolling:touch !important;">
<iframe src="YOUR_PAGE_URL" width="600" height="400"></iframe>
</div>
但如果您无法在iframe内上下滚动,如下图所示,
你可以尝试用2个手指沿对角线滚动,
这实际上适用于我的情况,所以如果您还没有找到解决方案,请分享它.
iframes似乎没有正确显示和滚动.您可以使用object标签替换iframe,内容可以用2个手指滚动.这是一个简单的例子:
<html>
<head>
<meta name="viewport" content="minimum-scale=1.0; maximum-scale=1.0; user-scalable=false; initial-scale=1.0;"/>
</head>
<body>
<div>HEADER - use 2 fingers to scroll contents:</div>
<div id="scrollee" style="height:75%;" >
<object id="object" height="90%" width="100%" type="text/html" data="http://en.wikipedia.org/"></object>
</div>
<div>FOOTER</div>
</body>
</html>
- 不幸的是,这也不起作用.似乎在4.2.1中有两个手指iframe和对象滚动(虽然它适用于文本框).希望Apple能在下一个版本中解决这个烦人的错误. (4认同)
这不是我的答案,但我只是从https://gist.github.com/anonymous/2388015复制它只是因为答案很棒并完全解决了问题.信用完全归于匿名作者.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
if (/iPhone|iPod|iPad/.test(navigator.userAgent))
$('iframe').wrap(function(){
var $this = $(this);
return $('<div />').css({
width: $this.attr('width'),
height: $this.attr('height'),
overflow: 'auto',
'-webkit-overflow-scrolling': 'touch'
});
});
})
</script>
正如其他帖子中提到的,溢出的css值的组合:auto; &-webkit-overflow-scrolling:touch;
当应用于有问题的iframe及其父div时,它可以正常工作
由于双滚动条在非触摸浏览器上的不幸副作用.
我使用的解决方案是通过javascript/jquery添加这些css值.这让我可以为所有浏览器使用基本CSS
if (isSafariBrowser()){
$('#parentDivID').css('overflow', 'auto');
$('#parentDivID').css('-webkit-overflow-scrolling', 'touch');
$('#iframeID').css('overflow', 'auto');
$('#iframeID').css('-webkit-overflow-scrolling', 'touch');
}
其中isSafariBrowser()被定义为foll ...
var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
var is_safari = navigator.userAgent.indexOf("Safari") > -1;
function isSafariBrowser(){
if (is_safari){
if (is_chrome) // Chrome seems to have both Chrome and Safari userAgents
return false;
else
return true;
}
return false;
}
这允许我的应用程序在iPad上工作注1)未在其他ios系统上测试过2)未在平板电脑上的Android浏览器上测试过,可能需要进行其他更改
(所以这个解决方案可能不完整)
- `function isSafariBrowser(){return is_safari &&!is_chrome; 除了事实上你不需要这个功能. (2认同)