如何在Safari移動版（iPad）上正確滾動？

Question

我需要以一種簡單的方式處理水平和垂直滾動，這對一般的Safari移動設備以及特殊的iPad都有效。

我有一個非常簡單的HTML/CSS框架，我想保持非常簡單的描述如下。

找到related fiddle here。

水平滾動條

不幸的是，這需要我計算滾動條的寬度，根據不同的內容。有沒有一種自動方式？

的HTML如下：

 <div class="scrollerContainer hScrollable"> 
      <div class="scroller"> 
       <div id="photo1"></div> 
       <div id="photo2"></div> 
       <div id="photo3"></div> 
       <div id="photo4"></div> 
       <div id="photo5"></div> 
       <div id="photo6"></div> 
       <div id="photo7"></div> 
       <div id="photo8"></div> 
       <div id="photo9"></div> 
      </div> 
     </div> 

和相關的CSS如下：

.hScrollable { 
    overflow-x: scroll; 
    overflow-y: hidden; 
    -webkit-overflow-scrolling: touch; 
    white-space:nowrap; 
} 

scrollerContainer { 
    -webkit-box-sizing: border-box; 
    width: 100%; 
    height: 50px; 
    margin: 0; 
    border: solid 1px black; 
} 
.scroller { 
    -webkit-box-sizing: border-box; 
    margin: 0; 
    padding: 4px; 
    white-space: nowrap; 
    overflow: hidden; /* Really important to avoid vertical scrolling on devices */ 
    width: 100%; 
    height: 50px; 
    background-color: lightgray; 
} 

.scroller>div { 
    width: 50px; 
    height: 50px; 
    display: inline-block; 
} 

垂直卷軸

我想的內容來填充父容器並超過垂直尺寸，垂直滾動。

的HTML如下：

<div id="container" style="height:400px"> 

     <div style="height:100px"> 
      Fixed content, I dont want to vscroll 
     </div> 
     <div class="tabContent"> 
      Potentially long content that should vscroll. 
      This div should fill to the end of the container. 
      I don't want to set its height to 300px, 
      but to find a way it does automatically. 
     </div> 

</div> 

Answer 1

你有一個有點過分的CSS發生在那裏。我用我移動/移除的屬性更新了你的小提琴。

我從CSS除去.hScrollable.scrollerContainer和並加入溢流特性權利.scroller。

所以.scroller現在看起來是這樣的：

.scroller { 
    -webkit-box-sizing: border-box; 
    margin: 0; 
    padding: 4px; 
    width: 100%; 
    background-color: lightgray; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    -webkit-overflow-scrolling: touch; 
    white-space:nowrap; 
} 

這裏的the fiddle。