Help us understand the problem. What is going on with this article?

iOS Safari で絶対位置指定された要素のスクロールが出来ない件

More than 1 year has passed since last update.

表題の件にハマりました。

例えばページ上にレイヤーを重ねて、一覧から項目を選択させるような場合に、絶対位置指定した要素の中でスクロールさせたいことってありますよね?

このとき、次の条件を満たしてしまうと iOS Safari でスクロールできなくなってしまいます。

  • position プロパティに absolutefixed を指定している(絶対位置指定)
  • height プロパティと overflow プロパティを使って要素内スクロールさせようとしている
  • -webkit-overflow-scrolling プロパティに touch を指定している

ちなみに最後の -webkit-overflow-scrolling ですが、これを指定しない場合スクロールは一応できるものの、滑りが悪くて壊滅的に操作性が悪いです。

コード例(抜粋)
.list
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
コード例(抜粋)
<div class="list">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    (中略)
    <div class="item">item22</div>
</div>

この現象を回避するためには position プロパティを指定する要素と overflow プロパティを指定する要素を変えて上げればOKです。

コード例(抜粋)
.list
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
}

.list-content
{
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

コード例(抜粋)
<div class="list">
    <div class="list-content">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        (中略)
        <div class="item">item22</div>
    </div>
</div>
chocolamint
GitHub の使い方がわからない情弱です。 主に C# とか JavaScript とか TypeScript とか。
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした