comment utiliser iscroll javascript dans le vide téléphonique?
J'ai essayé de mise en œuvre de la iscroll java script pour mon application comme un processus de rattrapage pour le CSS position:fixe qui ne fonctionne pas sur android 2 et 3 versions à l'aide de cordova 2.1.0
J'ai copié le code javascript de iscroll-lite de ici
code html
<div id="wrapper" class="wrapper">
<div id="wrapper-container" class="wrapper-container">
<div id="header" class="header">
<div id="header_title" class="header_title"> </div>
<div id="abc" class="abc"><img src="img/abc.png""/> </div>
</div>
<div id="images" class="images"><img name="slide" src="img/abc.png" width=100%; />
</div>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
</div>
</div>
<div id="footer" style="background-image:url(img/bar.png);" class="footer">
<div id="footer_text" class="footer_text">footer_text</div>
<div id="image" class="image noSelect"><img src="img/info.png" onclick="info()"/></div>
</div>
</div>
Le contenu de la balise desc est va déborder
CSS
.wrapper
{
position: absolute; width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_other
{
width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_container
{
width:100%; margin:0 auto; font-family:Arial, Helvetica, sans-serif;
}
.header
{
float:left; height:100%; min-height:100%; margin:0%; width:96%; padding:3% 2% 0;
}
.header_title
{
float:left; padding:0%; margin:0%; height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight: bold; width:80%;
}
.images
{
position:relative; width:100%;
}
.description
{
float:left; width:100%; overflow:auto; height:100%;
}
.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}
.desc
{
width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px; padding:0px 0px 40px 0px;
}
.desc p
{
margin-top:0;
}
.footer
{
width:100%; position:absolute; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
text-indent:1%; float:left; text-align:center; width:75%; margin-top:2%;
}
.info
{
width:25%; float:right; padding-top:1%;
}
À l'AIDE de iscroll
<script type="text/javascript" charset="utf-8" src="iscroll.js"></script>
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script>
var myScroll;
document.addEventListener("deviceready", onDeviceReady, false);
function scroll()
{
myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});
}
----
----
function onDeviceReady()
{
scroll();
----
----
Sur le défilement,je viens d'obtenir la suivante
W/webview(3101): Miss a drag as we are waiting for WebCore's response for touch down.
PROBLÈME:
Il est n'est pas de défilement.Si, à tout ce qu'il fait après un grand effort sur elle, mais,elle fait défiler une seule fois.Je vais revenir à la page principale et en retour elle ne se défile pas.
S'il vous plaît,me Guider!!
EDIT: ce que j'ai essayé dans diverses combinaisons..le remplacement de tous les divs comme balise li...le css n'était pas efficace. ensuite utilisés balise li à l'intérieur de chaque div. Ne sert à rien... IL n'a pas de défilement.:
<div id="wrapper">
<div id="scroller">
<ul>
<div id="header " class="header ">
<div id="header_title" class="header_title"> </div>
<div id="xyz" class="xyz"><img src="img/xyz.png" onClick="xyz()"/></div> </div> </ul>
<ul>
<div id="images" class="images"><img name="slide" src="img/banner1.png" width=100%; />
</div>
</ul>
<ul>
<div id="param" class="param">
<div id="abc" class="abc noSelect"> </div>
<div id="def" class="def noSelect" > </div>
<div id="ghi" class="ghi noSelect" > </div>
<div id="ijk" class="ijk noSelect" > </div>
</div>
</ul>
<ul>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong><li></li></strong></h1>
</div>
<div id="desc" class="desc">
<p><li></li> </p>
</div>
</div>
</ul>
source d'informationauteur user
Vous devez vous connecter pour publier un commentaire.
Vous ne semblez pas être en suivant la structure de iScroll demande. Le iScroll page mentionne spécifiquement (note le texte en gras):
Vous avez:
De sorte que votre div principale ne sera pas défiler par iScroller, vous ne faites que l'en-tête div scrollable. Jetez un oeil à la iScroll démo et tester en premier... ça marche OK pour votre appareil? Si oui, essayez de suivre sa structure.
Dans le code de script que vous avez postés, j'ai trouvé une erreur. Je ne sais pas si cette erreur est disponible dans votre fichier réel ou pas. Mais la pensée à part que la première.
C'est le code de votre script.
Erreur que j'ai trouvé
CSS
nom de la règle. Vous feriez mieux de passerID
ici. Supposons que votreID
est iScrollWrapper puis activer la barre de défilement dans le format suivant.Maintenant va voir le meilleur
DOM structure
(format HTML) pouriScroll
qui ne sera pas de la difficulté à vous et encoreW3C valid
Option 1
Option 2
Premier pense que vous avez à faire est de
L'élément auquel vous attachez iScroll devrait avoir non statique, non fixes par type de poste (vous Pouvez utiliser '
relative
"ou"absolute
'). Cet élément devrait avoirheight
danspixel
(Si vous avezmin-height
oumax-height
mais pas**height**
iScroll
va dire désolé. Il ne fonctionnera pas)Maintenant allons voir comment vous pouvez joindre iScroll.
Bon moyen de fixation
iScroll
est comme suit (ce que j'ai appris quand j'appliqueiScroll
pour les éléments)Si vous utilisez
Single Page Application (SPA)
puisSi vous faites
iScrollerObject
que votre membre de la variable dans le SPA de l'application puis utilisezNormal pages du navigateur.
Si vous mettre à jour dynamiquement le contenu ensuite utiliser
checkDOMChanges : true
dans vos options. Si encore il réussi à mettre à jour la barre de défilement dynamique DOM changer après l'achèvement de cette dynamique DOM changement d'appeliScrollerObject.refresh();
J'ai partagé ce que j'ai appris au sujet
iScroll
dans mon expérience. Si vous avez besoin s'il vous plaît laissez-moi savoir. Rappelez-vous que vous utiliseziScroll lite
version qui a effectivement moins de fonctionnalités que la normeiScroll4
. Si vous souhaitez utiliseriScroll
version puis aller aveciScroll4
.