HY,
这是我的测试页面的样子:
蓝色区域是父页面,绿色区域是运行ExtJS应用程序的IFrame(带有标签的简单视口).
如果站点在触摸设备(IPad,Android平板电脑等)上执行,则无法通过IFrame(绿色区域)上的“擦除”滚动页面.必须在蓝色区域上擦拭才能滚动页面.
这在ExtJS v4.2.1中已经正常工作(见下面的链接).
试验场:
https://skaface.leo.uberspace.de/ScrollTest/Ext510/(不按预期工作,使用ExtJS v5.1.1)
https://skaface.leo.uberspace.de/ScrollTest/Ext421/(按预期工作,相同的代码,但使用ExtJS v4.2.1)
测试代码:
父网站(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;"> <head> <title>Test</title> <Meta http-equiv="content-type" content="text/html; charset=utf-8"/> <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> </head> <body style="margin: 50px; background-color: blue;"> <iframe src="frame.html" width="100%" height="1400" style="border: none;"></iframe> </body> </html>
IFrame(frame.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;"> <head> <title>Test</title> <Meta http-equiv="content-type" content="text/html; charset=utf-8"/> <Meta name="viewport" content="width=device-width,maximum-scale=1"> <link rel="stylesheet" type="text/css" href="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all-debug.css" /> <script type="text/javascript" src="https://extjs.cachefly.net/ext/gpl/5.1.0/build/ext-all-debug.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.container.Viewport',{ style: { 'background-color': 'yellowgreen' },layout: 'fit',items: [{ xtype: 'label',text: 'Ext version: ' + Ext.versions.extjs.version,margin: 16 }] }); }); </script> </head> <body> </body> </html>
我真的很感激一个解决方法,因为它实际上使我的网站在移动设备上无用,即使他们已经完美的工作与ExtJS 4.2.1.
谢谢&最好的祝福
Ps:我已经发布了一个错误报告in the sencha forums,但由于我没有得到任何帮助,直到知道,我也在我的运气在stackoverflow …
解决方法@H_502_33@
行为很奇怪,我在使用niceScroll插件之前已经看过它了,而且许多其他的插件也和iframe有一样的问题,反正
this workaround
我使用Hammer.js jQuery插件来检测您的iframe上的触摸手势,如果您发现任何有关敏感性的问题(因为我不知道你正在寻找什么约束),您可以调整在他们的回购中找到的hammer.js选项(如pan阈值,指针..etc)
而代码很简单:
<body id="mainbody" style="margin: 50px; background-color: blue;">
<iframe id="myframe" src="frame.html" width="100%" height="1400" style="border: none;"></iframe>
</body>
<script>
var myBody
$('iframe').load(function(){
myBody=$(this).contents().find("body");
myBody.css({"height":"100%","overflow":"hidden"}).hammer({threshold:1}).bind("pan",myPanHandler);
});
function myPanHandler(ev)
{
$("#mainbody").scrollTop($("#mainbody").scrollTop()-ev.gesture.deltaY)
console.log(($("#mainbody").scrollTop()-ev.gesture.deltaY*0.5)+".."+$("#mainbody").scrollTop())
}
</script>
我使用Hammer.js jQuery插件来检测您的iframe上的触摸手势,如果您发现任何有关敏感性的问题(因为我不知道你正在寻找什么约束),您可以调整在他们的回购中找到的hammer.js选项(如pan阈值,指针..etc)
而代码很简单:
<body id="mainbody" style="margin: 50px; background-color: blue;"> <iframe id="myframe" src="frame.html" width="100%" height="1400" style="border: none;"></iframe> </body> <script> var myBody $('iframe').load(function(){ myBody=$(this).contents().find("body"); myBody.css({"height":"100%","overflow":"hidden"}).hammer({threshold:1}).bind("pan",myPanHandler); }); function myPanHandler(ev) { $("#mainbody").scrollTop($("#mainbody").scrollTop()-ev.gesture.deltaY) console.log(($("#mainbody").scrollTop()-ev.gesture.deltaY*0.5)+".."+$("#mainbody").scrollTop()) } </script>