jQuery Colorbox，iframe内容无法在iPad中滚动 [英] jQuery Colorbox, iframe content not scrolling in iPad

问题描述

在iPad上查看时，Colorbox iframe内容不会滚动，请阅读以下内容:

Colorbox iframe content does not scroll when viewed on iPad please read below:

https://github.com/jackmoore/colorbox/issues/41# issuecomment-5244379

当显示的网页大于从Ipad为颜色框设置的尺寸时，滚动功能将被禁用和/或不存在.

When displaying a web page that is larger than the dimensions set for the colorbox from an Ipad, the ability to scroll is disabled and/or does not exist.

有些人可能建议用一根手指或两根手指滚动，这是行不通的.

Some might suggest one finger or two fingered scrolling, this does not work.

先决条件: 拥有Ipad，或去当地的百思买买东西

Pre-reqs: Own an Ipad, or go down to local best buy

复制步骤: 转到 http://colorpowered.com/colorbox/core/example1/index.html 点击外部网页(iframe)链接， 在Google搜索中输入内容

Steps to reproduce: Go to http://colorpowered.com/colorbox/core/example1/index.html Click on Outside Webpage (Iframe) link, Enter something into the Google Search

结果: 您无法滚动浏览结果.

Results: You are unable to scroll through the results.

有没有解决的办法?有什么工作可以解决此问题吗? 顺便说一句，这在IE，Chrome和Firefox上正常运行.

Is there a fix for this? Is there something in the works to fix this issue? BTW, this works fine on IE, Chrome, and Firefox.

有人为此解决了吗???任何帮助将不胜感激.

Any body got a work around for this??? any help would be greatly appreciated.

推荐答案

更新-作者修正的问题

显然，杰克(Jack)截至今天(4th 2013年2月).值得从他的 Github 页中获取最新版本.

UPDATE - AUTHOR FIXED ISSUE

Apparently Jack has fixed this issue as of today (4th Feb 2013). It's worth taking the latest release from his Github page.

好的，我无法让jScrollPane正常工作.并不是说您不会，但是我也在使用自定义调整大小来调整iframe的大小，而且我认为它与jScrollPane的尺寸计算不能很好地配合.

OK, I couldn't get jScrollPane working properly. That's not to say you won't, but I was also using custom resizing to resize the iframe and I don't think it was playing well with jScrollPane's dimensions calculations.

但是，由于有了

I did, however, manage to get it working thanks to a solution to the more general iOS iframe scroll issue, thanks to Sharon here on stackoverflow. I have made a couple of tweaks to her code to play nicer with colorbox. Please note that this only works where you control the iframe content

只需将以下代码放入您的iframe:

Simply put the following code into your iframe:

setTimeout(function () {
    var startY = 0;
    var startX = 0;
    var b = document.body;
    b.addEventListener('touchstart', function (event) {
        startY = event.targetTouches[0].screenY;
        startX = event.targetTouches[0].screenX;
    });
    b.addEventListener('touchmove', function (event) {
        event.preventDefault();
        var posy = event.targetTouches[0].screenY;
        var h = parent.document.getElementById("cboxLoadedContent");
        var sty = h.scrollTop;

        var posx = event.targetTouches[0].screenX;
        var stx = h.scrollLeft;
        h.scrollTop = sty - (posy - startY);
        h.scrollLeft = stx - (posx - startX);
        startY = posy;
        startX = posx;
    });
}, 1000);

滚动并没有抖动，尽管您没有本地滚动的逐渐减速，但是只要您松开手指，滚动就会停止.另外，没有滚动条.除此之外，这是一个完美的解决方案.

The scrolling is not jittery, although you don't have the gradual slowdown of native scrolling, it just stops when you lift your finger. Plus, there's no scrollbar. Other than that it's a perfect solution.

包含沙龙解决方案的页面为您无法控制iframe的情况提供了另一种尝试.

The page with Sharon's solution offers an alternative to try for scenarios where you don't control the iframe.

这篇关于jQuery Colorbox，iframe内容无法在iPad中滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！