用於iPad的滾動框架

我正在開發一個兼容IE9/HTML5並可在iPad上工作的Web應用程序。我遇到的問題是，我似乎無法讓框架在iPad上正確滾動（或根本不能），同時它在瀏覽器中正常工作。我試過了單指滾動和雙指滾動以及下面列出的所有組合。任何幫助/想法將不勝感激。用於iPad的滾動框架

（FYI：Telerik的是第三方控件庫）

<telerik:RadSplitter ID="radSplitter2" runat="server" Height="100%"> 
    <telerik:RadPane ID="RadPane2" runat="server" Scrolling="Both"> 
    <iframe width="100%" height="100%" scrolling="no" src="HTMLPage1.htm" /> 
    </telerik:RadPane> 
</telerik:RadSplitter>

<telerik:RadSplitter ID="radSplitter3" runat="server" Height="100%"> 
    <telerik:RadPane ID="RadPane4" runat="server" Scrolling="Both" ContentUrl="HTMLPage1.htm"> 
    </telerik:RadPane> 
</telerik:RadSplitter>

<telerik:RadSplitter ID="radSplitter4" runat="server" Height="100%"> 
    <telerik:RadPane ID="RadPane5" runat="server" Scrolling="Both"> 
    <div style="width:100%; overflow:auto"> 
     <iframe width="100%" height="100%" scrolling="no" src="HTMLPage1.htm" /> 
    </div> 
    </telerik:RadPane> 
</telerik:RadSplitter>

此代碼的工作，但我真正需要的是能夠包括頁面作爲幀。

<telerik:RadSplitter ID="radSplitter1" runat="server" Height="100%"> 
    <telerik:RadPane ID="RadPane3" runat="server" Scrolling="Both"> 
    This Section Scrolls 
    This Section Scrolls 
    This Section Scrolls 
    This Section Scrolls 
    This Section Scrolls 
    This Section Scrolls 
    </telerik:RadPane> 
</telerik:RadSplitter>

來源

2011-10-07 mrK

解決方案結束了剛剛迫使幀滾動使用javascript：

只是把這個代替你的標籤。

<div id="scrollDiv" runat="server" style="position:relative; overflow:auto"></div> 
    <iframe id="iFrame1" runat="server" style="display:none"></iframe> 

    <script type="text/javascript" charset="utf-8"> 
     function initMobileScroll_<%= this.ClientID %>(ele) { 
      var mobileScrollArea = document.getElementById(ele); 

      mobileScrollArea.addEventListener('touchstart', function (event) { 
       touchstart_<%= this.ClientID %>(event); 
      }); 

      mobileScrollArea.addEventListener('touchmove', function (event) { 
       touchmove_<%= this.ClientID %>(event); 
      }); 

      // let’s set the starting point when someone first touches 
      function touchstart_<%= this.ClientID %>(e) { 
       startY = e.touches[0].pageY; 
       startX = e.touches[0].pageX; 
      } 

      // calls repeatedly while the user’s finger is moving 
      function touchmove_<%= this.ClientID %>(e) { 
       var touches = e.touches[0]; 

       // override the touch event’s normal functionality 
       e.preventDefault(); 

       // y-axis 
       var touchMovedY = startY - touches.pageY; 
       startY = touches.pageY; // reset startY for the next call 
       mobileScrollArea.scrollTop = mobileScrollArea.scrollTop + touchMovedY; 

       // x-axis 
       var touchMovedX = startX - touches.pageX; 
       startX = touches.pageX; // reset startX for the next call 
       mobileScrollArea.scrollLeft = mobileScrollArea.scrollLeft + touchMovedX; 
      } 

     } 

     var theFrame_<%= this.ClientID %> = document.getElementById('<%= iFrame1.ClientID %>'); 
     theFrame_<%= this.ClientID %>.onload = function() { 
      var frameBody = theFrame_<%= this.ClientID %>.contentWindow.document.body.innerHTML; 
      document.getElementById('<%= scrollDiv.ClientID %>').innerHTML = frameBody; 
     } 
     initMobileScroll_<%= this.ClientID %>('<%= scrollDiv.ClientID %>'); 
    </script>

來源

2011-10-10 15:48:08 mrK