Facebook アプリのようなスライド メニューを作成しようとしています。メニューの表示/非表示は正常に機能しますが、メニュー自体のタッチ スクロール機能に行き詰まります。
私が試した3つの解決策のうち、すべてに問題があります。これらの問題は次のように要約できます。
CSS タッチ スクロール
古いiOS
ではシングル フィンガー スクロールはサポートされていません
iScroll プラグイン ソリューション
メニューは正常にスクロールしますが、ページ上の他の部分がスクロールできなくなります。
jsFiddle の iScroll |
タッチ スクロール プラグイン ソリューション
メニューをタッチ スクロールすると、画面のすぐ上まで
スクロールします。
次のモバイル ブラウザーで 3 つのソリューションをそれぞれテストしました。
アンドロイド 4.0.4
- Android のデフォルト
- オペラ モバイル
- ファイアフォックス
- クロム
iOS 4.2.1
- サファリ
2つのプラグインをうまくプレイさせる方法を知っている人はいますか?
以下の 3 つのバージョンのコード
CSS バージョン
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Left Reveal - CSS</title>
<style>
html, body {margin:0; padding:0; font:1em/1.1em "Arial", sans-serif;}
h1 {clear:both; font-size:130%}
a#reveal-trigger {float:left; display:block; margin:0 0 20px; padding:10px; text-decoration:none;
border:1px solid #aaa; border-radius:3px; background:#ccc}
#container-reveal {position:relative; margin:0 auto; padding:0; overflow:hidden; border:1px solid black;}
#menuContainer-reveal {position:absolute; top:0; left:0; z-index:10; overflow-y:scroll; -webkit-overflow-scrolling: touch; background:#555;}
#menuContainer-reveal #menu {margin:0; padding:0; list-style:none;}
#menuContainer-reveal #menu li {margin:0; text-align:center; background:#ccc; font-weight:bold;}
#menuContainer-reveal #menu li a {display:block; padding:10px; color:black; border-bottom:1px solid black; text-decoration:none}
#menuContainer-reveal #menu li:last-child a {border-bottom:0}
#content-reveal {position:relative; background:white; z-index:20; padding:10px; border-left:1px solid #ccc}
</style>
</head>
<body>
<div id="container-reveal">
<div id="menuContainer-reveal">
<ul id="menu">
<li><a href="#">Test link - FIRST</a></li>
<li><a href="#">Test link 1</a></li>
<li><a href="#">Test link 3</a></li>
<li><a href="#">Test link 4</a></li>
<li><a href="#">Test link 5</a></li>
<li><a href="#">Test link 6</a></li>
<li><a href="#">Test link 7</a></li>
<li><a href="#">Test link 8</a></li>
<li><a href="#">Test link 9</a></li>
<li><a href="#">Test link 10</a></li>
<li><a href="#">Test link 11</a></li>
<li><a href="#">Test link 12</a></li>
<li><a href="#">Test link 13</a></li>
<li><a href="#">Test link 14</a></li>
<li><a href="#">Test link 15</a></li>
<li><a href="#">Test link 16</a></li>
<li><a href="#">Test link 17</a></li>
<li><a href="#">Test link 18</a></li>
<li><a href="#">Test link 19</a></li>
<li><a href="#">Test link 20</a></li>
<li><a href="#">Test link 21</a></li>
<li><a href="#">Test link 22</a></li>
<li><a href="#">Test link 23</a></li>
<li><a href="#">Test link 24</a></li>
<li><a href="#">Test link 25</a></li>
<li><a href="#">Test link 26</a></li>
<li><a href="#">Test link 27</a></li>
<li><a href="#">Test link 28</a></li>
<li><a href="#">Test link 29</a></li>
<li><a href="#">Test link 30</a></li>
<li><a href="#">Test link 31</a></li>
<li><a href="#">Test link 32</a></li>
<li><a href="#">Test link 33</a></li>
<li><a href="#">Test link 34</a></li>
<li><a href="#">Test link 35</a></li>
<li><a href="#">Test link 36</a></li>
<li><a href="#">Test link 37</a></li>
<li><a href="#">Test link 38</a></li>
<li><a href="#">Test link 39</a></li>
<li><a href="#">Test link 40</a></li>
<li><a href="#">Test link - LAST</a></li>
</ul>
</div>
<div id="content-reveal">
<a id="reveal-trigger" href="#">< > </a>
<h1>Reveal Menu - CSS</h1>
<p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis Tyrium coniugem eo auditis positam ac, recedite fit itaque filiam rex ut a lenoni vero non dum. Communicatio mihi cum autem quod tamen alius. Palpat venas tanquam vero diam nostra praedicabilium subsannio, theophile esse in deinde plectrum anni ipsa Invitamus me. Ante nesciret in rei finibus veteres hoc contra te sed. Tantus nata genere in rei completo litus Ephesum peteret sua in deinde cepit roseo commendavit auri. Deo adiuves finem imponunt hoc ambulare in. Illa eius non coepit cognitionis huius beneficium peregrina, volo erat bene accidentium in rei exultant deo.</p>
<p>Epheso Tyrum reverteretur ad per sanctus primum gaudet uxoris tibi. Neminem habere homo tu mihi esse ait regem adventu nihil impetrat est amet amet amet amet constanter approximavit te. Dionysiadis eum est cum unde beata inter sacris christiana in, innocentis sit Mariae maximas hanc enim ad per. Taliarchum in modo ad suis est amet amet consensit cellula rei exultant deo adiuves finem imponunt hoc contra me. Theophile atque bona delata iuvenis ut casus inferioribus civitatis intelligitur sicut in. Visceribusque esocem manibus dimittit in, ephesum peteret sua confusus ait.</p>
<p>Regem consolatus dum miror puella mihi Tyrum in lucem concitaverunt in deinde duas recitare ex auxilium volo. Auri est Apollonius non potentiae cognoscitivarum non ait. Diana praesentatis ne videret famis perisse naufrago, tharsiam si mihi Tyrum reverteretur. Quem est se vero cum autem quod una litus sua confusus eos. Ipso es sed quod una civitatis ut sua coniuge per accipere filia navem causa alia vero rex Dionysiadi. Iterum non ait in fuerat se est Apollonius mihi esse ait mea Stet consequat eiusdem ordo quos essem rogo me. Tempore Quaere allocutus ait mea in, tempor in modo invenit ubi ait. Eiusdem ea docentur Hellenicus sui Care die ad nomine Piscatore mihi Tyrum ad te. Testare in rei sensibilium acciperem qui auri. Facere potest ei primum intus vero rex Stranguillio eam in fuerat eum istam vero quo.</p>
<p>Aureos mercatoris vidisset stabat somnis quidquid iterato scelere evenissent anulo quod eam est cum, mauricii materialia sola dum est amet amet amet Cur meae. Item ut diem finito servis meo avari levavit diam ' Apollonius in fuerat construeret cena reges undis Tharsiam eam eos. Atqui plurium venenosamque serpentium ne alicuius tuo lugenti permittis dicamus quia illum in modo genito in fuerat se sed. Euismod tollam auri tecum ait in rei completo litus tuos ratio indue villicus ut diem finito servis meo lateque digne. Occurrit erat in modo cavendum es illum ille sui 'maternam castitatis ipsi sacerdotes. Quicumque inimica meam celebrabantur Apollonius non coepit cenam veniebant est amet coram regis fine omnino inventa fuit. Tace mordeo tertia veni perfrictione cogente iniquam deus. Puto suam ad suis caelo in.</p>
<p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis Tyrium coniugem eo auditis positam ac, recedite fit itaque filiam rex ut a lenoni vero non dum. Communicatio mihi cum autem quod tamen alius. Palpat venas tanquam vero diam nostra praedicabilium subsannio, theophile esse in deinde plectrum anni ipsa Invitamus me. Ante nesciret in rei finibus veteres hoc contra te sed. Tantus nata genere in rei completo litus Ephesum peteret sua in deinde cepit roseo commendavit auri. Deo adiuves finem imponunt hoc ambulare in. Illa eius non coepit cognitionis huius beneficium peregrina, volo erat bene accidentium in rei exultant deo.</p>
<p>Epheso Tyrum reverteretur ad per sanctus primum gaudet uxoris tibi. Neminem habere homo tu mihi esse ait regem adventu nihil impetrat est amet amet amet amet constanter approximavit te. Dionysiadis eum est cum unde beata inter sacris christiana in, innocentis sit Mariae maximas hanc enim ad per. Taliarchum in modo ad suis est amet amet consensit cellula rei exultant deo adiuves finem imponunt hoc contra me. Theophile atque bona delata iuvenis ut casus inferioribus civitatis intelligitur sicut in. Visceribusque esocem manibus dimittit in, ephesum peteret sua confusus ait.</p>
<p>Regem consolatus dum miror puella mihi Tyrum in lucem concitaverunt in deinde duas recitare ex auxilium volo. Auri est Apollonius non potentiae cognoscitivarum non ait. Diana praesentatis ne videret famis perisse naufrago, tharsiam si mihi Tyrum reverteretur. Quem est se vero cum autem quod una litus sua confusus eos. Ipso es sed quod una civitatis ut sua coniuge per accipere filia navem causa alia vero rex Dionysiadi. Iterum non ait in fuerat se est Apollonius mihi esse ait mea Stet consequat eiusdem ordo quos essem rogo me. Tempore Quaere allocutus ait mea in, tempor in modo invenit ubi ait. Eiusdem ea docentur Hellenicus sui Care die ad nomine Piscatore mihi Tyrum ad te. Testare in rei sensibilium acciperem qui auri. Facere potest ei primum intus vero rex Stranguillio eam in fuerat eum istam vero quo.</p>
<p>Aureos mercatoris vidisset stabat somnis quidquid iterato scelere evenissent anulo quod eam est cum, mauricii materialia sola dum est amet amet amet Cur meae. Item ut diem finito servis meo avari levavit diam ' Apollonius in fuerat construeret cena reges undis Tharsiam eam eos. Atqui plurium venenosamque serpentium ne alicuius tuo lugenti permittis dicamus quia illum in modo genito in fuerat se sed. Euismod tollam auri tecum ait in rei completo litus tuos ratio indue villicus ut diem finito servis meo lateque digne. Occurrit erat in modo cavendum es illum ille sui 'maternam castitatis ipsi sacerdotes. Quicumque inimica meam celebrabantur Apollonius non coepit cenam veniebant est amet coram regis fine omnino inventa fuit. Tace mordeo tertia veni perfrictione cogente iniquam deus. Puto suam ad suis caelo in.</p>
<p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis Tyrium coniugem eo auditis positam ac, recedite fit itaque filiam rex ut a lenoni vero non dum. Communicatio mihi cum autem quod tamen alius. Palpat venas tanquam vero diam nostra praedicabilium subsannio, theophile esse in deinde plectrum anni ipsa Invitamus me. Ante nesciret in rei finibus veteres hoc contra te sed. Tantus nata genere in rei completo litus Ephesum peteret sua in deinde cepit roseo commendavit auri. Deo adiuves finem imponunt hoc ambulare in. Illa eius non coepit cognitionis huius beneficium peregrina, volo erat bene accidentium in rei exultant deo.</p>
<p>Epheso Tyrum reverteretur ad per sanctus primum gaudet uxoris tibi. Neminem habere homo tu mihi esse ait regem adventu nihil impetrat est amet amet amet amet constanter approximavit te. Dionysiadis eum est cum unde beata inter sacris christiana in, innocentis sit Mariae maximas hanc enim ad per. Taliarchum in modo ad suis est amet amet consensit cellula rei exultant deo adiuves finem imponunt hoc contra me. Theophile atque bona delata iuvenis ut casus inferioribus civitatis intelligitur sicut in. Visceribusque esocem manibus dimittit in, ephesum peteret sua confusus ait.</p>
<p>Regem consolatus dum miror puella mihi Tyrum in lucem concitaverunt in deinde duas recitare ex auxilium volo. Auri est Apollonius non potentiae cognoscitivarum non ait. Diana praesentatis ne videret famis perisse naufrago, tharsiam si mihi Tyrum reverteretur. Quem est se vero cum autem quod una litus sua confusus eos. Ipso es sed quod una civitatis ut sua coniuge per accipere filia navem causa alia vero rex Dionysiadi. Iterum non ait in fuerat se est Apollonius mihi esse ait mea Stet consequat eiusdem ordo quos essem rogo me. Tempore Quaere allocutus ait mea in, tempor in modo invenit ubi ait. Eiusdem ea docentur Hellenicus sui Care die ad nomine Piscatore mihi Tyrum ad te. Testare in rei sensibilium acciperem qui auri. Facere potest ei primum intus vero rex Stranguillio eam in fuerat eum istam vero quo.</p>
<p>Aureos mercatoris vidisset stabat somnis quidquid iterato scelere evenissent anulo quod eam est cum, mauricii materialia sola dum est amet amet amet Cur meae. Item ut diem finito servis meo avari levavit diam ' Apollonius in fuerat construeret cena reges undis Tharsiam eam eos. Atqui plurium venenosamque serpentium ne alicuius tuo lugenti permittis dicamus quia illum in modo genito in fuerat se sed. Euismod tollam auri tecum ait in rei completo litus tuos ratio indue villicus ut diem finito servis meo lateque digne. Occurrit erat in modo cavendum es illum ille sui 'maternam castitatis ipsi sacerdotes. Quicumque inimica meam celebrabantur Apollonius non coepit cenam veniebant est amet coram regis fine omnino inventa fuit. Tace mordeo tertia veni perfrictione cogente iniquam deus. Puto suam ad suis caelo in.</p>
<p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis Tyrium coniugem eo auditis positam ac, recedite fit itaque filiam rex ut a lenoni vero non dum. Communicatio mihi cum autem quod tamen alius. Palpat venas tanquam vero diam nostra praedicabilium subsannio, theophile esse in deinde plectrum anni ipsa Invitamus me. Ante nesciret in rei finibus veteres hoc contra te sed. Tantus nata genere in rei completo litus Ephesum peteret sua in deinde cepit roseo commendavit auri. Deo adiuves finem imponunt hoc ambulare in. Illa eius non coepit cognitionis huius beneficium peregrina, volo erat bene accidentium in rei exultant deo.</p>
<p>Epheso Tyrum reverteretur ad per sanctus primum gaudet uxoris tibi. Neminem habere homo tu mihi esse ait regem adventu nihil impetrat est amet amet amet amet constanter approximavit te. Dionysiadis eum est cum unde beata inter sacris christiana in, innocentis sit Mariae maximas hanc enim ad per. Taliarchum in modo ad suis est amet amet consensit cellula rei exultant deo adiuves finem imponunt hoc contra me. Theophile atque bona delata iuvenis ut casus inferioribus civitatis intelligitur sicut in. Visceribusque esocem manibus dimittit in, ephesum peteret sua confusus ait.</p>
<p>Regem consolatus dum miror puella mihi Tyrum in lucem concitaverunt in deinde duas recitare ex auxilium volo. Auri est Apollonius non potentiae cognoscitivarum non ait. Diana praesentatis ne videret famis perisse naufrago, tharsiam si mihi Tyrum reverteretur. Quem est se vero cum autem quod una litus sua confusus eos. Ipso es sed quod una civitatis ut sua coniuge per accipere filia navem causa alia vero rex Dionysiadi. Iterum non ait in fuerat se est Apollonius mihi esse ait mea Stet consequat eiusdem ordo quos essem rogo me. Tempore Quaere allocutus ait mea in, tempor in modo invenit ubi ait. Eiusdem ea docentur Hellenicus sui Care die ad nomine Piscatore mihi Tyrum ad te. Testare in rei sensibilium acciperem qui auri. Facere potest ei primum intus vero rex Stranguillio eam in fuerat eum istam vero quo.</p>
<p>Aureos mercatoris vidisset stabat somnis quidquid iterato scelere evenissent anulo quod eam est cum, mauricii materialia sola dum est amet amet amet Cur meae. Item ut diem finito servis meo avari levavit diam ' Apollonius in fuerat construeret cena reges undis Tharsiam eam eos. Atqui plurium venenosamque serpentium ne alicuius tuo lugenti permittis dicamus quia illum in modo genito in fuerat se sed. Euismod tollam auri tecum ait in rei completo litus tuos ratio indue villicus ut diem finito servis meo lateque digne. Occurrit erat in modo cavendum es illum ille sui 'maternam castitatis ipsi sacerdotes. Quicumque inimica meam celebrabantur Apollonius non coepit cenam veniebant est amet coram regis fine omnino inventa fuit. Tace mordeo tertia veni perfrictione cogente iniquam deus. Puto suam ad suis caelo in.</p>
</div>
</div>
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/jquery-1.7.min.js">\x3C/script>')</script>
<script>
$(document).ready(function()
{
//Get DOM nodes & dimensions
var viewportHeight = $(window).height();
var content = $('#content-reveal');
var contentWidth = content.width()
//Set the menu width & height
$('#menuContainer-reveal').width(contentWidth-30).height(viewportHeight);
/* REVEAL MENU */
$('#reveal-trigger').toggle(function(e)
{
e.preventDefault();
content.animate({'left':(contentWidth-30)}, 250);
}, function(e)
{
e.preventDefault();
content.animate({'left':0}, 250);
})
})
</script>
</body>