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

###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、どの端末でも正常に動作します。