Erstellen eines verschachtelten Divrolls für eine mobile Website

StackOverflow https://stackoverflow.com/questions/8840200

Frage

Ist es möglich, auf einer jQuery -mobilen Site eine scrollbare verschachtelte DIV zu erstellen? Grundsätzlich möchte ich, dass eine feste Header und Fußzeile, aber der mittlere Abschnitt scrollbar ist. Ich habe versucht, Überlauf zu setzen: Scrollen (und ich habe die Breite und Höhe des Divs festgelegt), aber es scheint in meinem iOS -Simulator nicht richtig zu funktionieren. (Ich würde eine JSFIDDLE machen, aber es funktioniert nicht für das mobile Jquery)

Hier ist die HTML:

<body> 
<div data-role="page">
   <div data-role="header">
   <div id="header_image">
      <img src="images/top_logo.png" />
   </div>
   </div><!-- /header -->
       <div id="content_bg">
       <div data-role="content">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div><!-- /content -->
   </div><!-- /content_bg -->
   <div data-role="footer" data-theme="b">
   <div id="footer_text">
      <center><h4>Page Footer</h4></center>
   </div><!-- /footer_text -->
   </div><!-- /footer -->
   </div><!-- /page -->

Hier ist das relevante CSS:

#content_bg{
    background-color:#0038a5;
    height:310px;
    width:100%;
    text-size:11px;
    color:white;
    overflow: scroll;
    }

Vielen Dank für jedes Licht, das Sie bei diesem Problem leuchten können!

War es hilfreich?

Lösung

Es gibt viele Lösungen, darunter: Iscroll, FlexScroll, JQuery ScrollView -Experiment und andere (diese habe ich erfolgreich verwendet).

Ich fand FlexScroll am einfachsten, und sie sind alle ungefähr dem gleichen Codegewicht.

iscroll 4 -> http://cubiq.org/iscroll-4 (Stellen Sie sicher, dass Sie die untersuchen lite Version, da es ein kleineres Codegewicht hat und dennoch die grundlegenden Funktionen erfüllt)

FlexScroll -> http://www.hesido.com/web.php?page=customscrollbar (Ich mag diesen, der ursprüngliche Zweck ist es, benutzerdefinierte Scrollbars zu erstellen, aber es unterstützt Berührungsereignisse für Scroll -Bereiche auf mobilen Geräten.)

JQuery Mobile ScrollView -> http://jquerymobile.com/test/experiments/scrollview/ (Erstellt vom Jquery Mobile Team)

AKTUALISIEREN

Ich habe eine Reihe von iscrollbezogenen Fragen auf Stackoverflow beantwortet. Hier finden Sie einen Link, um sie anzuzeigen (in der Fall, Sie haben Probleme mit Iscroll): https://stackoverflow.com/search?q=user%3A752738+%5BJQuery-Mobile%5d+iscroll&submit=search

Andere Tipps

Iscroll ist Ihre Lösung. Überprüfen Sie die Website

http://cubiq.org/iscroll-4

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top