我正在尝试创建一个像Facebook应用程序一样的幻灯片菜单，我可以让显示/隐藏菜单正常工作，但是，我已经陷入了菜单本身的触摸滚动功能。
在我尝试的3种解决方案中，它们都有问题，这些问题可归纳如下：
CSS触摸滚动
旧版iOS不支持单指滚动
CSS touch on jsFiddle |
iScroll插件解决方案
菜单滚动正常，但它可以防止页面上的任何其他内容滚动。
iScroll on jsFiddle |
触摸滚动插件解决方案
当我触摸滚动菜单时，它会从屏幕顶部滚动
Touch Scroll on jsFiddle |
我已在以下移动浏览器中测试了3种解决方案中的每一种。
Android 4.0.4
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>
答案 0 :(得分：0)
我通过从初始化代码中删除此行来解决了阻止其他所有内容滚动的iScroll问题
document.addEventListener（'touchmove'，function（e）{e.preventDefault（）;}，false）;
此插件现在可以正常运行，我页面上的所有内容都按预期工作。
我将使用modernizr测试进行溢出：滚动以提供此插件，如果本地支持1手指滚动。