JQuery Colorbox, iframe content doesn't scroll on iPad

The content of the Colorbox iframe is not viewable when viewed on an iPad, please read below:

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

When displaying a web page that is larger than the size specified for the colorbox with iPad, the ability to scroll is disabled and / or does not exist.

Some may suggest scrolling with a finger or two fingers, this will not work.

Pre-Reqs: Follow the iPad, or Go to Local Best Purchases

Steps to play: Go to http://colorpowered.com/colorbox/core/example1/index.html Click on the link β€œExternal webpage (Iframe)”, Enter something into Google search

Results: You cannot view the results.

Is there a fix for this? Is there anything in this work to solve this problem? BTW, this works great on IE, Chrome, and Firefox.

Any body got a job for this ??? Any help would be greatly appreciated.

+4
source share
3 answers

UPDATE - COPYRIGHT FIXED ISSUE

Apparently, Jack fixed this issue to date (February 4, 2013). It's worth taking the latest release on the Github page.


Previous decision

OK, I could not work properly with jScrollPane. This does not mean that you will not, but I also used custom resizing to resize the iframe, and I don't think it played well with jScrollPane's size calculations.

Decision

However, I managed to get it working by solving the more general iOS iframe scroll problem, thanks to fooobar.com/questions/68518 / .... I made several settings for her code to play better with colorbox. Note that this only works where you control the contents of the iframe

Just enter 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); 

Scrolling is not nervous, although you do not have a gradual slowdown in natural scrolling, it just stops when you lift your finger. In addition, there is no scroll bar. It is also the perfect solution.

The Sharon solution page offers an alternative for scripts in which you do not control the iframe.

+6
source

I just did this, in my generic CSS I added #cboxLoadedContent{-webkit-overflow-scrolling: touch;}

Then, in my views opened by colorbox, I added the following body{-webkit-transform:translate3d(0, 0, 0);} style to css body{-webkit-transform:translate3d(0, 0, 0);}

This works on iPad and iPhone.

+1
source

Do you control your own iframe content or is it content from an external website, i.e. in a different domain? If the latter, I can not help.

If you control the contents of the iframe, you can use the jScrollPane plugin to solve your problem.

The body of your iframe should have CSS: auto overflow, and you need to wrap the div around your iframe content. When you are ready to get the iframe window height inside the iframe, set the css height for the div wrapper as the window height (or a little less), and then apply jScrollPane to your div wrapper.

 $(document).ready(function() { var $container = $("#myDiv"); var $win = $(window); if ($container.height() >= $win.height()){ $container.css({ 'width': $win.width(), 'height': $win.height() }); $container.jScrollPane(); } }); 
0
source

Source: https://habr.com/ru/post/1334870/


All Articles