Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What is going on with this article?
@kakuta_yu

iPhone Safariなのに、::-webkit-scrollbarが使えない...!

More than 1 year has passed since last update.

iPhoneのスクロールバーをカスタマイズする時、jsで実装するとスクロールの挙動が変わる。
デフォルトの挙動を残したかったので、::-webkit-scrollbarを使おうとしたが表示されなかった。

2020/03/12 追記

スクロールバーの非表示はできました。
もしかして使えるようになった?

色やサイズなどのスタイル変更は未確認です。

記述したコード

.container::-webkit-scrollbar {
  display: none;
  -webkit-appearance: none;
}

環境

  • iPhone XS
  • - iOS 13.3.1

参考URL

・iOS13でCSSでスクロールバー拡張できる::-webkit-scrollbarが使えなくなったよう
https://am-yu.net/2019/09/27/ios13-webkit-scrollbar/

・慣性スクロール実装でスクロールバーは常に表示できない?
https://fantastech.net/scroll-bar

・iOS デフォで慣性スクロールできるようになった?
https://qiita.com/cubkich/items/d192a70856e8bc63c7bc

考察

  1. iPhoneで慣性スクロールを指定すると、::-webkit-scrollbarが使えなくなる
  2. iOS13から慣性スクロールがデフォルトになった
  3. デフォで慣性スクロールなので::-webkit-scrollbarが使えなくなる

参考URLから察するに、これが原因と思われる。

解決策(模索中)

「iOS13から慣性スクロールがデフォルトになった」のはAppleの公式発表から読み取れる。

Added support for one-finger accelerated scrolling to all frames and overflow:scroll elements eliminating the need to set-webkit-overflow-scrolling: touch.

Safari 13 Release Notes
https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes#3314682

「-webkit-overflow-scrolling: touch」を記述しなくても慣性スクロールになるなら、
これを打ち消せば「::-webkit-scrollbar」が使えるのでは...??

「-webkit-overflow-scrolling: auto」と記述しましたが、うまくいきませんでした。

10
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kakuta_yu
都内のデザイン会社に勤めています。 Webデザイナー・フロントエンドエンジニア

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
10
Help us understand the problem. What is going on with this article?