彩盒內容不在移動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瀏覽器上滾動

回答

相關問題