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

overflow-scrolling: touch;でモーダルメニューを実装

More than 3 years have passed since last update.

overflow-scrolling: touch;でモーダルメニューを実装

スマホサイトで頻繁に見るモーダルメニュー。
ヘッダーにボタンが設置してあり、タップするとピロッとメニューが出てくる。しかし、このモーダルメニュー内でスクロールをさせるとなると、色々苦労があります。※内容は省略します

そんな時、モーダルメニューにcssのoverflow-scrolling: touch;を使えばモーダルメニューを簡単にスクロール実装できる!と思い実装していたら、いくつかの罠が。。。

・overflow-scrollingを入れている要素をdisplay:none;に設定すると、jsでdisplay:block;にしても、iOS8ではoverflow-scrollingが無効される
・上記の要素をdisplay:none;にしていなくても、cssのposition指定(モーダルだからマスト)をしていると、overflow-scrollingがやっぱり無効になる

iOS8での挙動には悩まされましたが、以下の実装で上手くいきました。

html(主にヘッダー等に設置するメニューボタン)

 <div id="btnMenu">メニュー</div>

html(モーダルメニューのカラム)

<div id="slidemenu">
 <div id="slidemenu_inner">
  <ul>
     <li>メニュー1</li>
     <li>メニュー2</li>
   </ul>
 </div>
</div>

css

#slidemenu{
    position:fixed;
    z-index:999;
    top:-9999999px;
    left:0;
    width:100%;
    height:100%;
}
#slidemenu_inner{
    width:100%;
    height:100%;
    display:block;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

【#slidemenu】
まずモーダルメニュー本体には、当然position指定。
そしてdisplay:none;以外の方法でメニューを隠す必要があるので、デフォルトの位置を適当に-999999pxなどの位置にしておく。ここまで上に設置をする理由は、サイトをスクロールさせていると、このモーダルメニューがちらっと表示されてしまう時があるため。なので安全をとってこの位置に設置。
【#slidemenu_inner】
slidemenu内の要素に対し、初めてここでoverflow-scrolling: touch;を指定。

jQuery
$('#btnMenu').on('click',function(){
 $('#slidemenu').animate(
   {'top':'0px'},100);
});

後はjsで、ボタンを押したときに-999999pxの位置から0pxの位置に下げさせればOK。
多少荒技ではありますが、iOS、Android、どの端末でも正常に動作します。

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
ユーザーは見つかりませんでした