iphone SE・5のサイズの時に、-webkit-overflow-scrolling: touch;が機能しない状態になっています。

私は、viewportを使い、今iphone SE・5の大きさに合わせたサイズのウェブサイトを作っています。iphone 6 ・6sの場合は、-webkit-overflow-scrolling: touch;が機能するのですが、iphone SEの時だけは機能しない状態になっています。もしわかる方がいらしたら、教えて頂きたいです。

view
1<div class="inner" style="margin-left: 0; overflow-y: hidden; overflow-x: scroll; overflow-scrolling:touch; -webkit-overflow-scrolling: touch; margin-left: 15px;">
2      <nav>
3        <ul class="top-nav" style="margin-top: 0px;">
4         <li>
5           <a class="top-t" href="/search">イベント検索</a>
6         </li>
7         <li style="margin-left: 10px;">
8           <a class="top-t" href="/" style="color: #222; border-bottom: solid 2px #222;">トップページ</a>
9         </li>
10         <li>
11           <a class="top-t" href="/groups">サークル一覧</a>
12         </li>
13         
14        </ul>
15      </nav>
16</div>

css
1    .inner {
2    margin: 0;
3    width: 290px;
4    position: relative;
5    overflow-y: hidden;
6    overflow-x: scroll;
7    overflow-scrolling: touch;
8    -webkit-overflow-scrolling: touch;
9    margin-left: 15px;
10    }
11    .top-nav {
12    position: absolute;
13    width: 290px;
14    font-size: 1.0em;
15    padding-left: 0px;
16    float: right;
17    margin: 12px 0 0 0px;
18    list-style-type: none;
19    height: 38px;
20    }
21    .top-nav>li>a {
22    display: inline-block;
23    padding: 0.5em;
24    background-color: transparent;
25    color: #6c6c6c;
26    text-decoration: none;
27    font-size: 0.9em;
28    height: 22px;
29    }

行動規範の内容に同意します

回答1件

ベストアンサー

-webkit-overflow-scrollingを使ったことはないですが…
iOSでも古いバージョンはサポートされていないですし、その他のブラウザはサポート外のようなので実装するには色々とリスクがあるようです。
https://caniuse.com/#search=-webkit-overflow-scrolling

JavaScriptやjQueryを使ったほうがよいかと思います。

検索キーワード
「javascript 慣性スクロール」
「jQuery 慣性スクロール」

投稿2020/04/09 04:04