2012-05-03 11 views
0

モバイルウェブサイトのページをスクロールすると、コンテンツが消え、小さな灰色と白の四角形が表示されます。スクロールを停止すると、コンテンツが再び表示されます。モバイルサイトのスクロール

これを防ぐ方法はありますか?

マイコード:

<html> 
    <head> 
     <title>PHP Test</title> 
     <!-- Code within Head Tag --> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript"> 
      $(window).load(function(){ 
       $("#loading").hide();  
      }) 
     </script> 
     <!-- Code within Head Tag --> 

     <style type="text/css"> 
      /* Document Styles */ 

      #wrapper{ 
       width:800px; 
       height:500px; 
       margin:0 auto; 
       padding:5px; 
       border:1px solid #CCC; 
       background:#CCC; 
      } 
      .desc{ 
       margin:5 auto; 
       width:800px; 
       text-align:left; 
      } 

      /* Loading Div Style */ 
      #loading{ 
       position:absolute; 
       width:300px; 
       top:0px; 
       left:0%; 
       margin-left:5px; 
       text-align:left; 
       padding:7px 0 0 0; 
       font:bold 11px Arial, Helvetica, sans-serif; 
      } 
      body { 
       overflow: hidden 
      } 
     </style> 
     <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
     <meta name="format-detection" content="telephone=no"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    </head> 
    <body> 
     <center> 
      <form> 
       <!-- Loading Div --> 
       <div id="loading"> 
        Fetching Hotels, please wait.. 
        <img src="loading.gif" alt="loading.." /> 
       </div> 
       <!-- Loading Div --> 
       <br> 
       <input type=text value="destination" name=title onclick="this.value = '';"><br> 
       Date:<br> 
       <select name="month"> 
        <option value="1">January 
        <option value="2">February 
        <option value="3">March 
        <option value="4">April 
        <option value="5">May 
        <option value="6">June 
        <option value="7">July 
        <option value="8">August 
        <option value="9">September 
        <option value="10">October 
        <option value="11">November 
        <option value="12">December 
       </select> 
       <select name="day"> 
        <option value="1">1 
        <option value="2">2 
        <option value="3">3 
        <option value="4">4 
        <option value="5">5 
        <option value="6">6 
        <option value="7">7 
        <option value="8">8 
        <option value="9">9 
        <option value="10">10 
        <option value="11">11 
        <option value="12">12 
        <option value="13">13 
        <option value="14">14 
        <option value="15">15 
        <option value="16">16 
        <option value="17">17 
        <option value="18">18 
        <option value="19">19 
        <option value="20">20 
        <option value="21">21 
        <option value="22">22 
        <option value="23">23 
        <option value="24">24 
        <option value="25">25 
        <option value="26">26 
        <option value="27">27 
        <option value="28">28 
        <option value="29">29 
        <option value="30">30 
        <option value="31">31 
       </select> 
       <select name="year"> 
        <option value="2012">2012 
        <option value="2013">2013 
        <option value="2014">2014 
       </select> 
       <br><br> 
       No. of Nights: 
       <select name="nights"> 
        <option value="1">1 
        <option value="2">2 
        <option value="3">3 
        <option value="4">4 
        <option value="5">5 
        <option value="6">6 
        <option value="7">7 
        <option value="8">8 
        <option value="9">9 
        <option value="10">10 
        <option value="11">11 
        <option value="12">12 
        <option value="13">13 
        <option value="14">14 
        <option value="15">15 
        <option value="16">16 
        <option value="17">17 
        <option value="18">18 
       </select> 

       <input type=submit> 

       <?php 
        // specify url of xml file 
        $url = "http://xmlfeed.laterooms.com/index.aspx?aid=1000&rtype=4&kword=".$_GET['title']."&sdate=".$_GET['year']."-".$_GET['month']."-".$_GET['day']."&nights=".$_GET['nights']."&orderby=hoteldistance&sortorder=asc"; 
        // get xml file contents 
        $xml = simplexml_load_file($url); 

        // loop begins 
        $i = 0; 
        foreach($xml->hotel as $hotel) 
        { 
         if (++$i > 20) { 
          // stop after 5 loops 
          break; 
         } 
         // begin new paragraph 
         echo "<p>"; 
         echo "<img src=".$hotel->images." height=100 width=100><br/>"; 
         echo "<strong>Hotel Name:</strong> ".$hotel->hotel_name."<br/>"; 
         echo "<strong>Prices From:</strong> &pound;".$hotel->prices_from."<br/>"; 
         echo "<a href=".$hotel->hotel_link."><img src=http://affiliates.laterooms.com/AffiliateImages/en/buttons/more_details1.gif></a><br/>"; 
         echo "<strong>Miles from ".$_GET['title']."</strong> ".$hotel->hotel_distance."<br/>"; 
         echo "</p>"; 
         // end paragraph 
        } 
        $cnt++; 
        // loop ends  
       ?>  
      </form> 
     </center> 
    </body> 
</html> 

答えて

0

私はあなたがこれを防ぐことはできないと思います。 (難解な回避策があるかもしれません)

これはブラウザとレンダリングの仕組みだと思います。ページの可視部分だけがレンダリングされ、ページをスクロールすると新しい可視領域がレンダリングされます。それがチェッカーボードを表示するまで。ただし、リソースを節約し、パフォーマンス上の理由(不安定なスクロールを避けるため)は、スクロールを停止したときにのみレンダリングが行われます。

ので、回避策の一部:

あなたはあなたが望むものを達成することができ、独自のスクロール機構を作成する場合は、しかし、いくつかの欠点があります。これは遅いかもしれませんが、これは一部のモバイルブラウザなどで互換性がなくなる可能性があります。

基本的な考え方は、オーバーフロー:非表示でコンテンツを「フルスクリーン」divに配置し、javascriptを使用してタッチオーバー、touchmove、touchcancelイベントをオーバーライド)、divの内容を自分でスクロールしたり、独自のスクロールバーを表示したりします。これはあまり複雑ではありませんが、やりたいことはたくさんありますそれはバウンスとオーバースクロール、そしてすべてを使って「正しい」。 iscroll4を参照してください、あなたのためにそれを行うことができます:)

関連する問題