我正在尝试创建一个像 Facebook 应用程序一样的幻灯片菜单，我可以让显示/隐藏菜单正常工作，但是，我被菜单本身的触摸滚动功能卡住了。
在我尝试过的3个解决方案中，它们都有问题，这些问题可以总结如下：
CSS 触摸滚动
jsFiddle 上
的旧 iOS 不支持单指滚动
CSS触摸
iScroll 插件解决方案
菜单滚动正常，但它会阻止页面上的其他任何内容滚动。
jsFiddle 上的 iScroll |
Touch Scroll插件解决方案
当我触摸滚动菜单时，它会直接从屏幕顶部
滚动到jsFiddle上的Touch Scroll |
我已经在以下移动浏览器中测试了这 3 种解决方案中的每一种。
安卓 4.0.4
- 安卓默认
- 歌剧移动
- 火狐
- 铬合金
iOS 4.2.1
- 苹果浏览器
任何人都知道如何让这两个插件玩得很好？
以下 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>