• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
mocurot nort

mocurot nort

  • Contents
  • About
  • Contact

ios safariでのスクロールバー表示について

2018-11-13 by mocurot コメントを書く

※ご注意:ios Safariでのスクロール問題を可決するための記事ではありません。

iosのsafariで親要素幅を子要素がはみ出す場合にスクロールバーを常に表示させると、慣性スクロールが効かなくなります。
MacとiPhoneのSafariでは、スクロールの挙動が違うので戸惑ってしまう方も多いと思います。
これを解決するために時間をかけるなら、仕様とするなり、分からせUIを実装するなりした方が結果的に良いですね。

.outer{
  width: 95%;
  margin: 0 auto;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.outer::-webkit-scrollbar {
  background: #666;
}
.outer::-webkit-scrollbar:horizontal {
  height: 5px;
  }
.outer::-webkit-scrollbar-thumb{
  background: red;
}
.inner{
  width: 2000px;
  padding: 2em;
  background: #ccc;
}

outerクラスの-webkit-overflow-scrolling: touch;はsafariでのスクロールに慣性を与えてくれます。

.outer{
  width: 95%;
  margin: 0 auto;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch; //これ
}

しかし-webkit-overflow-scrolling: touch;を使用すると::-webkit-scrollbarの設定が無視されてしまうんですね。
ios safari以外では、スクロールバーが表示されていてもスクロールに慣性が効いているので、開発ブラウザからiPhoneで確認すると違和感があります。

以前から問題としてアップデートをきたしていましたが、ios 12のSafari 12でも修正はありませんでした。
MacとiPhoneでスクロールの挙動が違うのは、Appleが想定するモバイルデバイスでのスクロール体験はこれがベスト(仕様)ということでしょう。

0
この記事に興味を持っていただけたら
をクリックしてもらえると励みになります!

Filed Under: Notes 関連タグ:CSS, IPHONE

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最初のサイドバー

Author

NAME : mocurot
mocurot noteの管理人。フロントエンドエンジニア、バックエンドも少々。
Mac、iPhone、Kindle、Guitar、NINTENDO、SONY、FromSoftwareに関心を示します。

  • GitHub
  • RSS
  • Tumblr
  • Twitter
  • Youtube

Recommended Articles

  • 6ヶ月プロテインダイエットをしてみて
    6ヶ月プロテインダイエットをしてみて
  • MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
    MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
  • CatalinaでEmacsのファイルアクセスを許可する方法
    CatalinaでEmacsのファイルアクセスを許可する方法
  • さくらのVPSで80/443ポートに繋がらない
    さくらのVPSで80/443ポートに繋がらない
  • input,textareaのCSSをリセット -iOS Safari -
    input,textareaのCSSをリセット -iOS Safari -
  • SassでCompassを使う
    SassでCompassを使う
  • Sassで@import
    Sassで@import
  • LEMP環境の構築[ルートログインからSSHデーモンの設定]
    LEMP環境の構築[ルートログインからSSHデーモンの設定]

タグ

AMAZON ANKER APPLE APPLE WATCH APPS CAMERA CENT OS COMPASS CSS DARK SOULS DB DESIGN DIET GADGET GIT GITHUB GUITAR GULP HTML IPHONE KINDLE LEMP MAC NGINX NODE.JS NOTE PHP PS4 SASS SCSS SEKIRO SERVER WORDPRESS _s
プライバシーと Cookie: このサイトは Cookie を使用しています。このサイトの使用を継続することで、その使用に同意したとみなされます。
Cookie のコントロール方法を含む詳細についてはこちらをご覧ください。 Cookie ポリシー

Copyright © 2021 mocurot ・ ログイン