我正在尝试在iOS上滚动iframe,我成功了,滚动得很好,参考：
http://home.jejaju.com/play/iframe-scroll.html
http://areaaperta.com/nicescroll/demo.html
但是,所有解决方案都存在问题：iframe页面未完全显示…
我在我的iphone和ipad上测试过,iframe页面显示不稳定.
任何的想法？
例：
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8" />
<Meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
<Meta name="viewport" content="width=device-width,user-scalable=no" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.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: 'scroll','-webkit-overflow-scrolling': 'touch'
});
});
})
</script>
<title>Untitled</title>
</head>
<body>
stuff
<div>
<iframe src="iframe-scroll-long.html" height="500" width="500"></iframe>
</div>
more stuff
</body>
</html>
解决方法
我找到了div与“绝对”风格的组合,nicescroll确实修复了choppines.
您必须在iframe加载的页面上加载nicescroll.
在同一页面中用div包装所有内容(绝对样式)
#content { position:absolute; }
使用包装的div内容加载nicescroll.
$(document).ready(function() {
$("html").niceScroll("#content");
});
链接到演示页面,您可以检查代码：http://areaaperta.com/nicescroll/demo/iframe6.html
自动使用iOS本机滚动,在其他平台上你有nicescroll活动.
我在iPad上测试了iOS 5.1.