Want more features on Pastebin? Sign Up, it's FREE!
Guest

Horizontal scrolling issue with iscroll

By: lucaswiman on Dec 14th, 2012  |  syntax: HTML  |  size: 3.49 KB  |  views: 199  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
  6.         <meta name="apple-mobile-web-app-capable" content="yes" />
  7.  
  8.         <title>hScroll Failure</title>
  9.  
  10.         <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  11.  
  12.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  13.  
  14.  
  15.         <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  16.  
  17.         <script src="https://raw.github.com/cubiq/iscroll/master/src/iscroll.js"></script>
  18.         <script src="https://raw.github.com/watusi/jquery-mobile-iscrollview/master/lib/jquery.mobile.iscrollview.js"></script>
  19.         <style>
  20.             table {
  21.                 width: 1000px;
  22.             }
  23.             table tr td {
  24.                 height: 1000px;
  25.                 width: 100px;
  26.                 border: 1px solid black;
  27.                 background-color: red;
  28.                 vertical-align: top;
  29.                 font-size: 40px;
  30.            
  31.             }
  32.         </style>
  33.         <script>
  34.             // allow browser chrome to be scrolled to so you can refesh the page on iPhone
  35.             $.mobile.iscrollview.prototype.options.preventPageScroll = false;
  36.             $.mobile.iscrollview.prototype.options.scrollTopOnResize = false;
  37.         </script>
  38.  
  39.     </head>
  40.     <body>
  41.         <header data-role="header">
  42.             <h1>Header</h1>
  43.         </header>
  44.  
  45.         <div data-role="content" class="content">
  46.             <div id="iscrollified" data-iscroll='{"zoom": true, "zoomMin": 0.25, "hScroll": true, "preventPageScroll": false}'>
  47.             <!-- <div id="iscrollified" > -->
  48.                 <ul data-role="listview">
  49.                     <li>
  50.                         <div id="container">
  51.                             <table id="really-wide-content" width="1000">
  52.                                 <tr>
  53.                                     <td>
  54.                                         1
  55.                                     </td>
  56.                                     <td>
  57.                                         2
  58.                                     </td>
  59.                                     <td>
  60.                                         3
  61.                                     </td>
  62.                                     <td>
  63.                                         4
  64.                                     </td>
  65.                                     <td>
  66.                                         5
  67.                                     </td>
  68.                                     <td>
  69.                                         6
  70.                                     </td>
  71.                                     <td>
  72.                                         7
  73.                                     </td>
  74.                                     <td>
  75.                                         8
  76.                                     </td>
  77.                                     <td>
  78.                                         9
  79.                                     </td>
  80.                                     <td>
  81.                                         10
  82.                                     </td>
  83.                                 </tr>
  84.                             </table>
  85.                         </div>
  86.                     </li>
  87.                 </ul>
  88.             </div>
  89.         </div>
  90.     </body>
  91. </html>
clone this paste RAW Paste Data