彩盒内容不在移动Safari浏览器上滚动

晚上好，
我创建了一个使用厚盒子的网站，它显示日历，并且出现的问题之一是内容不会在iPhone类型的浏览器上滚动。我试图将它更新到colorbox，看看是否解决了问题，但没有。彩盒内容不在移动Safari浏览器上滚动

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

这里是我一直在用，试图弄清楚问题出一个页面：http://hsr-bsa.org/test/test.php

谢谢，
迈克

来源

2011-01-10 Mike Di Domenico

在您的测试网站寻找这项工作做得很好，你似乎已经解决了这个问题。你愿意与我们其他人分享你的解决方案吗？ – 2012-06-18 13:29:45

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

This page声称你可以通过两个手指在具有overflow：scroll set的区域内滚动来解决它。我还没有能够为自己尝试这个，因为我还没有设法让公司的iPad测试它。

来源

2011-02-01 12:54:51 GordonM

这是真的，但自从iOS发生变化以后无法使用。 – 2012-06-18 13:30:40

如果有人发生这个答案的问题，请参阅my answer在另一个线程上的这个问题。请注意，您需要控制iframe内容，即在同一个域中。

来源

2012-07-10 08:43:30

与感谢杰克·穆尔颜色框css文件已更新，以解决这个问题：

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

修订与WebKit的特定溢出规则应该做的伎俩样式表。无需更新任何JavaScript功能。

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

来源

2013-03-26 23:50:04 Matthew3k

这工作。请接受这是正确的答案。 – 12hys 2013-06-24 21:18:12

我

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

来源

2017-09-22 09:17:15

彩盒内容不在移动Safari浏览器上滚动

回答

相关问题