水平滚动不适用于Chrome iPad

我已经创建了一个水平滚动网站，但由于某种原因，ipad上的chrome缩小了整个布局以显示它而不启用水平滚动。水平滚动不适用于Chrome iPad

我创建了一个test file复制这一问题与下面的代码：

<!doctype html> 
    <html class="no-js" lang="en-US" dir="ltr"> 
     <head> 
      <meta charset="utf-8"> 
      <meta http-equiv="x-ua-compatible" content="ie=edge"> 

      <!-- Title --> 
      <title>Testing Horziontal Scroll</title> 

      <!-- For responsive behavior --> 
      <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0"> 

      <style> 
       .horizontal{ 
        height: 500px; 
        width: 4000px; 
       } 
       .item{ 
        width: 1000px; background: #f00; float: left; height:100%; 
       } 
       .item:nth-child(2){ 
        background: #0f0; 
       } 
       .item:nth-child(3){ 
        background: #00f; 
       } 
      </style> 
     </head> 
     <body> 
      <div class="horizontal"> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
      </div> 
     </body> 
    </html>

我试图消除视口元标记，它解决了这一问题，但创建在其他设备上的问题。

来源

2016-01-19 Imran Bughio

你有没有尝试添加在CSS溢出：滚动; ？ – Sphinx

身上还是html？我现在会尝试。 –

我试过它没有工作。 –

你可以尝试添加以下你的CSS：

body { 
    overflow-y:scroll; 
}

这将迫使溢出的左边和右边设置为被滚动。

希望这有助于！

来源

2016-01-19 15:01:26 Simplicity

不行，没有工作！ –

@ImranBughio不幸的是，我目前已经没有iPad了，但你也可以尝试添加这个属性'-webkit-overflow-scrolling：touch;'到主体CSS – Simplicity

没关系，不断提示，工作。 –

水平滚动不适用于Chrome iPad

回答

相关问题