

cssでナビゲーションの横スクロールを実装しようとしているんですが、うまくいきません。  
環境はiPhone5c、iOS 10.3.3、Safari 602.1です。  
下記のようにコードを書いているんですが、iPhoneでは全くスクロールできません。  
PCやXperiaでは問題なくスクロールできています。  
ご教授よろしくお願い致します。

[code]

    <div class="navigation">
      <ul>
        <li>nav1</li>
        <li>nav2</li>
        <li>nav3</li>
        <li>nav4</li>
      </ul>
    </div>
    
    .navigation {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      width: 100vw;
    }
    
[/code]


CC BY-SA 4.0
2017-09-24T02:30:44.990
38149
2021-09-10T10:07:15.487
2021-07-25T05:28:04.910
3060
24644
question
ios css
iPhoneでナビゲーションの横スクロールを実現したい


100vwという指定のため横スクロールしていないと思います。  
vwという単位は、ビューポートの幅に対する割合のため100vwは、横幅ピッタリ１００％ということになります。  
その為、少なくともiOSでは横スクロールは発生しません。（iOS11のSafariで確認）  
vwを1000とかの値にすると、画面サイズよりもコンテンツサイズが大きくなるためiOSでも横スクロールが発生します。


CC BY-SA 3.0
2017-09-25T19:01:38.827
38184
2017-09-25T19:01:38.827
2214
38149
answer


スニペットで表示しやすい様に加工しています。  
1\. .navigationの幅を200pxにしました。  
2\. li はおそらく横ならびだと思いますので、flexboxで並べました。  
3\. flex-wrapの初期値はnowrapなので、liは折り返しません。  
4\. a もwhite-space: nowrapで改行なしにしました。  
5\. ul の幅を明示的に .navigation よりも大きい300pxにしました。

[code]

    .navigation {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      width: 200px;
      border: 2px solid red;
      margin: 0;
      padding: 0;
    }
    .navigation ul {
     display: flex;
     justify-content: flex-start;
     width: 300px;
     list-style: none;
     margin: 0;
     padding: 0;
    }
    .navigation li {
     flex-grow: 1;
     background-image: linear-gradient(30deg,#999,#e99);
    }
    .navigation a {
     white-space: nowrap;
    }
[/code]

[code]

    <div class="navigation">
      <ul>
        <li>nav1</li>
        <li>nav2</li>
        <li>nav3</li>
        <li>nav4</li>
      </ul>
    </div>
[/code]

ul の幅が .navigation よりも大きいか？がスクロールするかどうかのポイントだと思います。  
li の数が足りないとか？


CC BY-SA 3.0
2017-10-22T11:52:00.850
38958
2017-10-22T11:52:00.850
12727
38149
answer