Colorbox 内容不在移动 Safari 上滚动答案

【问题标题】：Colorbox content not scrolling on mobile safariColorbox 内容不在移动 Safari 上滚动
【发布时间】：2011-01-10 00:45:20
【问题描述】：

晚上好，
我使用显示日历的厚框创建了一个网站，其中一个问题是内容不会在 iPhone 类型的浏览器上滚动。我已尝试将其更新到颜色框，看看是否解决了问题，但没有解决。

如何让移动浏览器允许内容滚动？

这是我一直用来尝试解决问题的页面：http://hsr-bsa.org/test/test.php

谢谢，
迈克

【问题讨论】：

查看您的测试站点，您似乎已经解决了这个问题。您愿意与我们分享您的解决方案吗？

标签： browser mobile colorbox

【解决方案1】：

感谢 Jack Moore，colorbox css 文件已更新以解决此问题：

#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}

使用 webkit 特定的溢出规则修改样式表应该可以解决问题。无需更新任何 javascript 函数。

来源：https://github.com/jackmoore/colorbox/commit/ca4e63c71cf1ec00fb3340f2e1a0a5512cbc8f0a

【讨论】：

【解决方案2】：

这似乎是 Webkit 移动版本的限制。

This page 声称您可以通过在设置了 overflow:scroll 的区域内用两根手指滚动来解决它。尽管我还没有设法拿到公司的 ipad 来测试它，但我无法自己尝试一下。

【讨论】：

【解决方案3】：

如果有人遇到这个答案问题，请在另一个线程上的这个问题上查看 my answer。请注意，您需要控制 iframe 内容，即在同一个域上。

【讨论】：

【解决方案4】：

这对我很有效

<script>
    var devicetype = '<?php echo $devicetype; ?>';// get ur divice type variable
    if(devicetype == 'mobile'){
        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);
    }
    </script>

【讨论】：