wie zu verwenden iscroll javascript in Telefon-Lücke?
Habe ich versucht, die Umsetzung der iscroll java-script für meine Anwendung als Abhilfe Prozess für die CSS - position:fixeddass funktioniert nicht in android 2 und 3 Versionen mit cordova 2.1.0
Habe ich kopiert, die javascript von iscroll-lite von hier
html-code
<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>
Der Inhalt des desc-tag wird überlauf
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%;
}
MIT 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();
----
----
Auf Blättern,bekomme ich nur die folgenden
W/webview(3101): Miss a drag as we are waiting for WebCore's response for touch down.
PROBLEM:
Es ist nicht scrollen.Wenn überhaupt tut es nach großer Anstrengung auf,aber es scrollt nur einmal.Ich gehe zurück auf die Hauptseite und gib Sie nicht Blättern überhaupt.
Bitte,führe mich!!
EDIT: dies habe ich versucht in verschiedenen Kombinationen..ersetzen alle divs als li-tag...die css war nicht wirksam. dann verwendet li-tag innerhalb der einzelnen div. Nicht verwenden... ES hat nicht scrollen.:
<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>
InformationsquelleAutor der Frage user | 2013-06-07
Du musst angemeldet sein, um einen Kommentar abzugeben.
Scheinen Sie sich nicht nach der Struktur, die iScroll fragt nach. Der iScroll Seite explizit erwähnt wird (beachten Sie den Fett gedruckten text):
Haben Sie:
Also dein main-div wird nicht gescrollt iScroller, machen Sie sich doch nur die header-div Scrollbar ist. Haben Sie einen Blick auf die iScroll demo und testen Sie es aus... es funktioniert OK für Ihr Gerät? Wenn ja, versuchen Sie zu Folgen, seine Struktur.
InformationsquelleAutor der Antwort Filippos Karapetis
In der script-code, die du gepostet hast, habe ich einen Fehler gefunden. Ich weiß nicht, ob diese Fehler in deiner eigentlichen Datei-oder auch nicht. Aber dachte, zu teilen, dass einer der ersten.
Dies ist dein script-code.
Fehler habe ich gefunden
CSS
name der Regel. Sie besser passID
hier. Übernehmen Sie IhreID
ist iScrollWrapper dann aktivieren Sie die scroller im folgenden format.Jetzt sehen Sie die besten
DOM structure
(HTML-format) füriScroll
wird nicht Mühe, die Sie und nochW3C valid
Option 1
Option 2
Ersten denken, Sie haben zu tun ist,
Das element aus, dem Sie Anhängen, iScroll haben sollte, nicht-statische, nicht-festen position Typ (Können '
relative
' oder 'absolute
'). Das element sollteheight
impixel
(Wenn Siemin-height
odermax-height
aber keine**height**
iScroll
wird sagen, sorry. Es wird nicht funktionieren)Jetzt sehen, wie Sie Anhängen können, iScroll.
Gute Möglichkeit der Anbringung
iScroll
ist wie folgt (Das, was ich gelernt habe, wenn ich mich bewerbeniScroll
für Elemente)Wenn Sie
Single Page Application (SPA)
dannWenn Sie
iScrollerObject
wie Ihre member-variable in SPA-Anwendung verwenden Sie dannFür den normalen browser-Seiten.
Wenn Sie dynamisch zu aktualisieren, die Inhalte dann verwenden
checkDOMChanges : true
in die Optionen. Wenn es immer noch Fehler beim aktualisieren der scroller für dynamische DOM-ändern Sie dann nach Abschluss, dynamische DOM-änderung nenneniScrollerObject.refresh();
Ich habe geteilt, was ich gelernt über
iScroll
in meiner Erfahrung. Wenn Sie Fragen haben, bitte lassen Sie mich wissen. Bitte denken Sie daran, Sie sind mitiScroll lite
version, die hat eigentlich weniger features als die standard -iScroll4
. Wenn Sie verwenden möchteniScroll
version, dann gehen Sie mitiScroll4
.InformationsquelleAutor der Antwort Faizul Hasan