iscroll Problem mit zweidimensionalen ( horizontal + vertikal ) scrollen, scrollbare sind Verwandte Themen?
Problem in Kürze
Habe ich ein Stück von zwei-dimensionalen code scrollen. Blättern als solches funktioniert gut. Scrollen kann man in jede Richtung (nicht wie Sie nur die horizontale oder nur die vertikale in a ti,e), aber es gibt zwei Probleme -
- Bildlauf über den sichtbaren Bereich in Richtung oben und Links, nicht bounce-back die scrollbaren Bereichs.
- Scrollen nach rechts und unten prallt zurück.
Problem demo - http://jsfiddle.net/sandeepan_nits/pAhjU/6/
Hinweis - Test im webkit-Browser (Google chrome und Safari).
Lösung, die ich bin auf der Suche nach
- Entweder, darauf hinweisen, was falsch in meinem code.
- Oder teilen Sie jede ordnungsgemäß umgesetzt funktionsfähige demo der beiden Wege scrollen (horizontal + vertikal) mit der gleichen version von iscroll, so dass ich die Folgen die gleichen. Ich bin mit version 3.7.1, vorzuziehen, oder mithilfe von iscroll, version 4, auch gut.
- Oder irgendwelche Hinweise, natürlich, würde geschätzt werden.
Problem Beschreibung
Bitte überprüfen Sie funktionierenden code hier - http://jsfiddle.net/sandeepan_nits/pAhjU/6/
Hinweis -
- Test im webkit-Browser (Google chrome und Safari).
- Ich habe wissentlich lege alles in die HTML-Abschnitt in der jsfiddle, denn wenn ich verschiedene Dinge ganz, und das scrolling nicht funktioniert, und ich bin nicht sicher, wo genau es nicht mehr funktioniert. Danke, wenn Sie zeigen können, aus.
Code
Hier ist der HTML -
<div class="header">
<div class='left_link'></div>Demo</div>
<div id="main_content" class="main_content">
<b><div id=scroller1><br/>
<div class='center_data'>Scrollable area</div>
<div class='center_data'>hello world!</div>
<br/>
</div></b>
</div>
Hinweis - ich weiß, es ist Ungültiger html - <div id=scroller1>
innerhalb <b></b>
und ich bin mir nicht sicher warum, wenn ich entfernen Sie die <b></b>
- tags, das horizontale scrollen funktioniert nicht mehr - überprüfen Sie hier.
Hier ist die js -
var myScroll;
var a = 0;
function loaded() {
//setHeight(); //Set the wrapper height. Not strictly needed, see setHeight() function below.
//Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier.
myScroll = new iScroll('scroller1', {desktopCompatibility:true});
//myScroll2 = new iScroll('scroller2', {desktopCompatibility:true});
}
//Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer).
//If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove.
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
//Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);
Ich denke, der Grund ist, dass das scrollbare div wird standardmäßig gerendert in der unteren rechten Ecke des scrollbaren Bereichs. Aber ich bin nicht sicher über die richtige Art und Weise zu konfigurieren, diese Dinge - wie, um festzulegen, wo die für das Rendern des scrollbaren div in der scollable Bereich. Bisher habe ich keine funktionierende demo der beiden Wege-scrolling - horizontal + vertikal scrollen.
Ich überprüfte die Dokumentation von iscroll und viele demos, fanden aber keine demo wo Bildlauf durchgeführt werden kann in beiden Richtungen - sowohl vertikal als auch horizontal. Ich habe das "Angenommen Optionen sind:" Abschnitt unter "Syntax" - Abschnitt in http://cubiq.org/iscroll aber keine dieser Parameter, scheinen das zu sein, was ich genau Suche.
Anderem
- Auch, eine weitere Sache, ich bin nicht in der Lage zum anzeigen der Bereich, der durch dom-Elemente im chrome-browser, während ich überprüfen das gegeben scroll-demo. Anzeigen, indem Sie den Bereich, den ich meine, bewegt man die Maus über den dom-Inspektor highlights der dom-in die browser-Ansicht. Wenn Sie nicht erscheinen? Ich habe mit validierten HTML wie im http://jsfiddle.net/sandeepan_nits/pAhjU/12/.
- Jemand bitte erstellen Sie ein tag
iscroll
oderiscroll3
so dass ich neu taggen, meine Frage.
Update
Ich will nur normal, die zweidimensionale scrollen Sie mit dem scroll-Bereich wird richtig in den sichtbaren Bildschirm und es sollte bounce-back auf die Einnahme außerhalb des Bildschirms. Im Moment gibt es keine bounce back (in meinem jsfiddle) auf Bildlauf in Richtung oben und Links, außerhalb Bildschirm. Bounce-back passiert, zum scrollen nach rechts und unten. Ich möchte nur die Scroll-Bereich gut aufgestellt, in den Bildschirm. Ich denke, bounce-back wird automatisch behoben dann.
InformationsquelleAutor Sandeepan Nath | 2011-07-25
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich denke, die Letzte version (4.1.8) auf der github-repo wird dein problem lösen 😉 ich verwende es auf einigen Projekten und es ist jetzt optimiert für desktop-browser an 😉
Bearbeiten
Aus der Dokumentation :
Standardmäßig, beim erstellen eines neuen iScroll('idOfElement') das scrollen ist vertikal und horizontal. Es kann deaktiviert werden mit diesen Parametern. Dual-Blättern ist völlig möglich, wie dieses video zeigt es.
So, zu zwingen, dual Scroll :
Sehen cubiq.org/iscroll-4
Ich hatte geprüft, ob die zuvor. Jetzt noch mal überprüft, aber all die demos, die ich sah, sind entweder vertikale-nur scrollen (wie cubiq.org/dropbox/iscroll4/examples/custom-scrollbar) oder nur horizontaler scroll (wie cubiq.org/dropbox/iscroll4/examples/carousel). Vermisse ich die 2D-demo irgendwo?
Editiert Antwort; )
Diese information ist vor Ort auf vielen Dank. Die Projekt-Dokumentation wirklich fehlt, dass einige dieser nuance bietet noch immer eine erstaunliche Skript aber.
InformationsquelleAutor ChristopheCVB
Dies ist keine vollständige Lösung, aber das könnte Ihnen helfen.
Zunächst Der HTML-code war nicht richtig verschachtelt, und so waren Sie nötig, um die
<div>
innerhalb der<b>
. Ich reparierte die HTML ein wenig, und seine Arbeit ohne die<b>
http://jsfiddle.net/Aexhz/
Und mit korrekt verschachtelt, HTML und korrekten Einstellungen, Das funktionierte auch nach der Aufteilung der HTML - /JS - /CSS -
Für mich, es zeigt einige Horizontale sowie Vertikale Scrollen, aber ich weiß nicht, ob das ist, wie Sie es haben wollen. ich Bearbeitet die Klasse die Initialisierung Zeile, als auch
ZU
Dadurch nicht beeinflusst viel, aber ich noch stellen.
Werde ich weiterhin auf der Suche in diesem und aktualisieren Sie meine Antwort, wenn ich etwas neues.
scrollen, um genau wie wir, bewegen Sie den Mauszeiger in den Bildschirm
+1 vielen Dank für Ihre Mühe, die Trennung der html - /css - /js -..
InformationsquelleAutor Pheonix
Ich weiß, Sie wollen dieses Problem beheben, mithilfe iscorll aber wollte dies mit Euch zu teilen, ich hatte großartige Ergebnisse mit: http://jscrollpane.kelvinluck.com/#usage
Es ist hochgradig anpassbar mit css, demo hier mit den vertikalen und horizontalen Bildlauf: http://jscrollpane.kelvinluck.com/basic.html
InformationsquelleAutor catalint