Question

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

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

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

谢谢，
麦克

Answer 1

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

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

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

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

Answer 2

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

This page声称你可以通过在溢出的区域内滚动两个手指来解决它：滚动设置。虽然因为我没有设法让ipad公司对其进行测试，但我还是无法为自己尝试这一点。

Answer 3

如果有人回答这个问题，请在另一个帖子上查看my answer关于这个问题的问题。请注意，您需要控制iframe内容，即在同一个域中。

Answer 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>

Colorbox内容不能在移动Safari中滚动

4 个答案: