水平滾動頁面，移動瀏覽器添加垂直高度

我想要一個水平滾動而不是垂直滾動的頁面。下面的代碼適用於桌面瀏覽器，但是在移動瀏覽器中查看頁面時，我遇到了問題。我仍然可以水平滾動，但高度不限於100vh，並且在包裝下面填充了大量空白空間。水平滾動頁面，移動瀏覽器添加垂直高度

<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    </head> 

    <body> 
     <div class="wrapper"> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
     </div> 
    </body> 

    </html> 

    .html, body { 
     max-height:100vh;} 

    .wrapper{ 
     width:2300px; 
     display:flex; 
     background-color:red; 
     height:100vh; 
     max-height:100vh; 
     overflow:scroll; 
     -webkit-overflow-scrolling:touch} 

    .box{ 
     position:relative; 
     align-self: center; 
     margin-left:50px; 
     float:left; 
     width:400px; 
     height:400px; 
     background-color:white;}

來源

2016-02-26 Johnathon

我做了一個codepen向你展示我的解決方案。我沒有在手機上測試過。

但是！在我的chromebook上使用chrome瀏覽器時，我最初提到的空白問題是針對移動設備的。我添加了幾行你可以看到我在codepen的JS部分評論過。具體來說，我確定主體有margin: 0;，然後在body和.wrapper上使用overflow-x和overflow-y屬性來進一步控制使用vh引起一些空白的滾動條。

HTML：

<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    </head> 

    <body> 
     <div class="wrapper"> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
     </div> 
    </body> 
</html>

CSS：

.html, body { 
    margin: 0; 
    overflow-y: hidden; 
    max-height:100vh;} 

    .wrapper{ 
     width: 2300px; 
     display:flex; 
     background-color:red; 
     height:100vh; 
     max-height:100vh; 
     overflow-x: scroll; 
     overflow-y: hidden; 
     -webkit-overflow-scrolling:touch} 

    .box{ 
     position:relative; 
     align-self: center; 
     margin-left:50px; 
     float:left; 
     width:400px; 
     height:400px; 
     background-color:white;}

來源

2016-02-26 01:24:19

完美。這只是分離包裝上的溢出並確保Y被隱藏。謝謝！ – Johnathon

水平滾動頁面，移動瀏覽器添加垂直高度

回答

相關問題