Рамки прокрутки для iPad - PullRequest
Новая
       28

Рамки прокрутки для iPad

0 голосов
/ 07 октября 2011

Я занимаюсь разработкой веб-приложения, которое будет совместимо с IE9 / HTML5 и будет работать на iPad.Проблема, с которой я сталкиваюсь, заключается в том, что я не могу заставить фреймы правильно прокручивать (или вообще) прокручивать на iPad, пока он отлично работает в браузере.Я пробовал как прокрутку одним пальцем, так и прокрутку двумя пальцами, и все перечисленные ниже комбинации.Буду признателен за любую помощь / идеи.

(К вашему сведению: 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>

Ответы [ 3 ]

1 голос
/ 12 декабря 2011

Для устройств iOS вам нужно установить overflow: auto;, иначе прокрутка не будет работать. Для своих веб-приложений я использовал fancybox для модального отображения iframes, и как только я изменил настройку переполнения в файле css, прокрутка двумя пальцами отлично работала на iPad.

0 голосов
/ 10 октября 2011

В итоге решение было просто заставлять кадры прокручиваться, используя 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>
0 голосов
/ 08 октября 2011

Проверьте, как он работает с внутренними фреймами, если указано свойство ContentUrl в Pane?

http://demos.telerik.com/aspnet-ajax/splitter/examples/externalcontentloading/defaultcs.aspx

...