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 oder iscroll3 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

Schreibe einen Kommentar