【发布时间】：2012-11-10 14:48:33
【问题描述】：
我正在尝试创建一个类似于 Facebook 应用程序的幻灯片菜单，我可以让显示/隐藏菜单正常工作，但是，我被菜单本身的触摸滚动功能卡住了。
我尝试过的3个解决方案，都存在问题，这些问题可以总结如下：
CSS 触摸滚动
旧版 iOS 不支持单指滚动
CSS touch on jsFiddle |
iScroll 插件解决方案
菜单滚动良好，但它会阻止页面上的任何其他内容滚动。
iScroll on jsFiddle |
Touch Scroll 插件解决方案
当我触摸滚动菜单时，它会滚动到屏幕顶部
Touch Scroll on jsFiddle |
我已经在以下移动浏览器中测试了这 3 种解决方案。
Android 4.0.4
- Android 默认
- Opera 移动版
- 火狐
- 铬
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>
【问题讨论】：
标签： jquery facebook menu slide iscroll